Page 1 of 1

Alignment of radio button/checkbox labels

Posted: Tue Feb 10, 2015 10:51 am
by Eric Praline
Hi all

I've been struggling with this for a while now, trying to get labels aligned to the left of a radio button/checkbox.
I've tried it a few ways - with the <label> tag surrounding the radio button (eg <label>label text here<input type="radio" /></label>), and also separate (eg <label>label text here</label><input type="radio" />, but nothing seems to quite work when the label is a bit too long.

The form needs to be mobile responsive, so I'm trying to design it with the form having a maximum width of 400px to start with... hopefully it should then work fine when the screen size increases!

I've attached a couple of examples of where it's going wrong...

(1) the radio buttons look fine when the label is short, but if it's longer and goes over two lines the radio button gets aligned to the bottom (examples marked 1 on the screenshot), when they should be aligned top
(2) if the label is just too long to display the radio button on the same line, it gets pushed downwards... but then the next label appears on the same line, making it look very confusing (example marked 2 on the screenshot)
(3) the labels for the checkboxes have completely messed up when they're too long

The HTML currently looks like the following:

Code: Select all

<label for="ContractType_01">Self-employed / freelance<input type='radio' id="ContractType_01" name='ContractType' value="01" /></label>
... and the CSS:
[text]
label {
font-size:1rem;
color:#4D4D4D;
cursor:pointer;
display:block;
font-weight:normal;
line-height:1.3;
margin-bottom:1px;
margin-top:3px;
}

input[type="checkbox"], input[type="radio"] {
margin-top:3px;
transform: scale(1.5);
-webkit-transform: scale(1.5);
display:inline-block;
float:right;
padding-left:10px;
vertical-align:text-top;
}
[/text]

Can anyone give some pointers on how to get this sorted, please? What little remains of my hair is in the process of being torn out...

Thanks!