PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Wed Sep 30, 2020 3:20 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 1 post ] 
Author Message
PostPosted: Tue Feb 10, 2015 11:51 am 
Offline
Forum Commoner

Joined: Wed Aug 29, 2007 8:37 am
Posts: 32
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:
Syntax: [ Download ] [ Hide ]
<label for="ContractType_01">Self-employed / freelance<input type='radio' id="ContractType_01" name='ContractType' value="01" /></label>


... and the CSS:
Syntax: [ Download ] [ Hide ]
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;
}
 


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!


Attachments:
q17_checkbox.jpg
q17_checkbox.jpg [ 103.59 KiB | Viewed 2237 times ]
q15_radio.jpg
q15_radio.jpg [ 147.12 KiB | Viewed 2237 times ]
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 1 post ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: Google [Bot] and 5 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group