Posted 4 months ago #
Hi,
This is a great form. However, no matter what css I add to either the extra php or my main css or even in the extra section css setting, the checkboxes align vertical and the labels are below each specific box.
See here: http://www.griffingraffix.com/govinda-healing/contact-us/
I searched online for over 3 hrs and tried gazillion fixes posted by many people... none worked :(
Pls help and thank you for such a great form!
Posted 4 months ago #
CSS in your theme is causing it.
Do this as a test:
In Admin, click on Appearance, Themes.
Temporarily change your theme to the stock theme:
“WordPress Default” (default for WP version 2.0+)
“Twenty Ten” (default for WP version 3.0+)
“Twenty Eleven” (default for WP version 3.2+)
It does not cause any harm to temporarily change the theme and change back.
Does it work properly now?
If it does, then the theme you are using is the cause.
Help with theme CSS issues can be provided on the Premium Support Form
http://www.fastsecurecontactform.com/support
Posted 4 months ago #
Was the theme.
Thanks Mike for great plug-in. The code below worked for aligning labels with boxes. If you have a solution for aligning everything on a single line, I'd appreciate it. I already made .fsc_data_container wider to accommodate the full lenght line.
For those having same issue this custom CSS added to your main theme should work:
#si_contact_ex_field1_1_1 { display:inline; margin:0;}
#si_contact_ex_field1_1_2 { display:inline;margin:0;}
#si_contact_ex_field1_1_3 { display:inline;margin:0;}
*repeat for each box and its associated number as seen here.
** if this is for a form other than form 1 I believe you'll also have to change the field numbers as well as checkbox # but not sure. You can check correct ID with firebug or other app.
the margin code is optional as I had much too much space between lines of checkboxes.
This however, has not put all 3 checkboxes on same line as I had wished but it did put the labels next to checkboxes at least.
Posted 4 months ago #
Hi Mike,
One more question if I may.
There's a lot of vertical spacing between the 3 checkbox lines and from its title too.
When viewing html from firebug I see this code and there's some line breaks in there and pretty sure that's the reason for all that extra spacing.
<div style="text-align: left; padding-top: 0px; margin-bottom: 2px; ">
<label>Interests:</label>
</div>
<div style="text-align: left; ">
<span style="white-space: nowrap; ">
<br/> /*line break here*/
<input type="checkbox" style="width: 13px; " id="si_contact_ex_field1_1_1" name="si_contact_ex_field1_1" value="selected"/>
<label style="display: inline; " for="si_contact_ex_field1_1_1">Deep Tissue Massage</label>
</span>
<br/> /*line break here*/
<span style="white-space: nowrap; ">
<br/> /*line break here*/
<input type="checkbox" style="width: 13px; " id="si_contact_ex_field1_1_2" name="si_contact_ex_field1_2" value="selected"/>
<label style="display: inline; " for="si_contact_ex_field1_1_2">Akashic Record Sessions</label>
</span>
<br/> /*line break here*/
<span style="white-space: nowrap; ">
<br/> /*line break here*/
<input type="checkbox" style="width: 13px; " id="si_contact_ex_field1_1_3" name="si_contact_ex_field1_3" value="selected"/>
<label style="display: inline; " for="si_contact_ex_field1_1_3">Life Coaching Sessions</label>
</span>
</div>I can't seem to find where to remove those. Can u guide me please?
Thanks a bunch!
trying this backtick thing again... this is an edit...
Posted 4 months ago #
oups.. goofed I guess here it is same post as above with code in proper brackets I hope. sorry I'm french and don't know what backtick is.
Hi Mike,
One more question if I may.
There's a lot of vertical spacing between the 3 checkbox lines and from its title too.
When viewing html from firebug I see this code and there's
there and pretty sure that's the reason for all that extra spacing.
'<div style="text-align: left; padding-top: 0px; margin-bottom: 2px; ">
<label>Interests:</label>
</div>
<div style="text-align: left; ">
<span style="white-space: nowrap; ">
<input type="checkbox" style="width: 13px; " id="si_contact_ex_field1_1_1" name="si_contact_ex_field1_1" value="selected"/>
<label style="display: inline; " for="si_contact_ex_field1_1_1">Deep Tissue Massage</label>
</span>
<span style="white-space: nowrap; ">
<input type="checkbox" style="width: 13px; " id="si_contact_ex_field1_1_2" name="si_contact_ex_field1_2" value="selected"/>
<label style="display: inline; " for="si_contact_ex_field1_1_2">Akashic Record Sessions</label>
</span>
<span style="white-space: nowrap; ">
<input type="checkbox" style="width: 13px; " id="si_contact_ex_field1_1_3" name="si_contact_ex_field1_3" value="selected"/>
<label style="display: inline; " for="si_contact_ex_field1_1_3">Life Coaching Sessions</label>
</span>
</div>'
I can't seem to find where to remove those. Can u guide me please?
Thanks a bunch!
Posted 4 months ago #
arrrggg... lol. guess I didn't get the backtick right but anyways, look at the code and where there are emtpy lines is where the br/ (line breaks) are.
really sorry about all this mess thanks for your help!
Posted 4 months ago #
By default radio and checkboxes are displayed vertical. Here is how to make them display horizontal: add the tag {inline} before the label, like this: {inline}Pizza Toppings:,olives;mushrooms;cheese;ham;tomatoes
When you do this there is no line break br tag used
Posted 4 months ago #
Looking at the source, I see your theme or another plugin is putting extra br tags in the html between the checkbox fields.
Also it puts p tags around the form comments. Themes should not add additional tags in the html output from plugins.
Posted 4 months ago #
Totally agree Mike! As much as possible themes and plugins should not alter other source code from non-pertaining elements.
I was hoping you could help but since it seems these extra line breaks don't come from your own code then I guess I'll have to figure this one out on my own... blah... more fun for me lol. And the search begins....
Thanks though for your quick responses and of course, this really great plugin!
You must log in to post.
