Page 1 of 1
Formbuilder: Checkbox group - lining up the checkboxes against the form labels
Posted: Tue Jun 29, 2010 4:58 am
by Darwin Web Design
Hi, I'm using CMSMS 1.7.1 with FormBuilder 0.61b
Most of the form's elements sit nicely on the page but the checkbox group, I cannot get to line up in IE.
In Firefox, it sits just how I want it, but in IE, the formfields and checkbox are separated by a line and the boxes have a grey border that I can't get rid of (please see screenshots attached).
I have applied a class of ".checkbox-group" to the entire checkbox group and the background of the area in question is shown in green.
To demonstrate, please see:
http://www.darwinwebdesign.com.au/index.php?page=test
There was a similar post below, but it was based on table layout...
http://forum.cmsmadesimple.org/index.php/topic,15180.0.html
And I also thought
http://forum.cmsmadesimple.org/index.php/topic,45013.0.html may have been a close solution, but don't know how to apply this to the checkboxes.
I look forward to any hints if possible on how to apply some CSS to make this work, many thanks.
Re: Formbuilder: Checkbox group - lining up the checkboxes against the form labels
Posted: Thu Jul 01, 2010 12:20 pm
by maranc
Looks like problem with line¨height. Witch version of IE used you to make screenshot.
Marek A.
Re: Formbuilder: Checkbox group - lining up the checkboxes against the form labels
Posted: Thu Jul 01, 2010 12:25 pm
by uniqu3
Link to the page doesn't work.
But as Marek already mentioned it is line-height issue. You could add height after line-height to fix it for IE.
Re: Formbuilder: Checkbox group - lining up the checkboxes against the form labels
Posted: Fri Jul 02, 2010 5:26 am
by Darwin Web Design
Thanks Marek and Uniqu3
The IE screenshot is IE6, I believe they line up in IE8 so maybe I don't need to worry so much...
Sorry the page was down yesterday. The link is now active again:
http://www.darwinwebdesign.com.au/index.php?page=test
I have experimented with the classes and tried the line-height to the label, the box group and the boxes in various combinations with no luck yet...
If you have a chance, would be great if you could have a look. Thanks.
Also do you know how to get rid of that grey border on the checkboxes from IE? I've set border to 0 and this hasn't done it.
Re: Formbuilder: Checkbox group - lining up the checkboxes against the form labels
Posted: Fri Jul 02, 2010 8:03 am
by uniqu3
To remove border try
The border comes from
Code: Select all
.contactform input {
border: 1px solid #ccc;
margin-bottom: 5px;
padding: 2px;
}
so you need to specify input.
This could also be the problem with IE6, i didn't study you whole Form CSS but as i can see you have tried to style checkbox_group which actually has no function at all it's an empty div inside the form if you take a look at the markup.
You should try styling this issue by assigning another cms class to all fields with checkbox in FormBuilder. When you have this done each label and input will be wrapped inside a div with your class.
Then you can play around with:
Code: Select all
div.yourclass {
height:xx; and so on}
.yourclass label {
your:styling;
line-height:1em;
height:1em; /*IE*/}
.yourclass input {
your:styling;
Re: Formbuilder: Checkbox group - lining up the checkboxes against the form labels
Posted: Sat Jul 03, 2010 2:02 pm
by maranc
Try add:
cms_checkbox label {
line-height: /your value in em, px, pt/;
}
You must remember that Opera, IE and Mozilla Firefox are interpreting another checkbox.
Example in Opera default margin for checkbox is 2px. So - if you want the same efect you must specify all parameter like padding, margin, border ...
Marek A.
Re: Formbuilder: Checkbox group - lining up the checkboxes against the form labels
Posted: Mon Jul 05, 2010 4:46 am
by Darwin Web Design
Thank you very much for your help once again.
I have now removed the grey border successfully.
I'm still working on the layout in IE with lining up the check boxes and will try to assign another class as suggested.
I appreciate your time and help.