Tagged: 

  • Author
    Posts
  • November 12, 2012 at 9:09 pm #284

    rkeahey
    Member

    Is there a way to force the labels on checkboxes in forms to align with the checkbox instead of slightly below the checkbox? See reference link.

    Thanks

    Robert

    November 14, 2012 at 5:04 am #288

    frank
    Keymaster

    I never got the link.
    I think the alignment is a minor margin issue.

    Franklin Gitonga Lead Developer.

    November 14, 2012 at 5:40 am #289

    rkeahey
    Member

    I put the link in the Link URL: field, but maybe it didn’t make it through.

    I’ve attached a JPG with example of misalignment.

    Thx

    R

    Attachments:
    You must be logged in to view attached files.
    November 15, 2012 at 2:55 pm #291

    frank
    Keymaster

    Hi,

    I’ve just noticed that issue in firefox . It looks fine in chrome and safari though. I’ll try to find out why that’s the case. Which browser did you see that error on by the way?

    Thanks for pointing that out.

    Franklin Gitonga Lead Developer.

    November 16, 2012 at 5:55 am #292

    rkeahey
    Member

    I’m using Chrome

    R

    November 16, 2012 at 4:58 pm #295

    rkeahey
    Member

    Having the same problem on IE9. Haven’t checked FF or Safari.

    November 17, 2012 at 5:21 am #302

    frank
    Keymaster

    Thanks. I think I’ll be testing that this weekend and I’ll work on a solution.

    Franklin Gitonga Lead Developer.

    November 21, 2012 at 3:37 am #319

    rkeahey
    Member

    I was able to fix the problem with the following that I added to the Custom CSS widget:

    div.input-checkbox-block {
    display:block;
    position:relative;
    }

    div label.checkbox {
    display: block;
    left: 20px;
    position:relative;
    }

    div input.checkbox {
    width: 13px;
    height: 13px;
    vertical-align: bottom;
    position: absolute;
    top: -17px;
    left: -20px;
    *overflow: hidden;
    }

    It seems to work ok for the latest versions of Chrome, IE9, Safari and Firefox.

    November 21, 2012 at 7:43 pm #323

    frank
    Keymaster

    Awesome! I’ll test this out and add it into the core.

    Thanks

    Franklin Gitonga Lead Developer.

    November 27, 2012 at 10:06 pm #344

    rkeahey
    Member

    I came up with a much simpler fix.

    .input-checkbox-block input[type=”checkbox”] {
    float: left;
    display: inline-block;
    width: auto;
    height: auto;
    margin-top:-7px;
    margin-right:5px;
    line-height: normal;
    }

    This seems to work fairly well and much easier. Simply change the class or id name as required. I place the code in a custom CSS widget so I don’t have to alter the theme CSS files.

    You can do the same for radio buttons – input[type=”radio”]

    R

    November 28, 2012 at 9:40 am #351

    frank
    Keymaster

    Again, thank you very much for sharing. Am gonna sticky this :)

    Franklin Gitonga Lead Developer.

You must be logged in to reply to this topic.