I am having CSS issues with the alignment. See at:
http://comparefhahomeloans.com/texas-loan-request-form/#gf_1
Mainly, I want the radio buttons side by side and all the other fields to be ligned up correctly.
It seems, that Studiopress did add some extra gravity forms css in the theme css. However, I cannot find the solution for this.
By default Radio Buttons are not displayed side by side. If you want to display them side by side you would have to write custom CSS to float them side by side. You would do this by inspecting the HTML and writing the appropriate CSS to float them side by side.
If you install Gravity Forms v1.5, which is currently a development release, you can use Ready Classes which make it easier to position fields and radio button/checkboxes side by side.
See this blog post:
http://www.gravityhelp.com/css-ready-classes-for-gravity-forms/
Ready Classes require Gravity Forms v1.5 which you can download from the Downloads page. Keep in mind Gravity Forms v1.5 is a development release, not a final release.
Hi Carl,
I am using Version 1.5.rc2.1 and I have tried the ready classes (using gf_list_2col). But it did not produce any results. Have you seen step 2 of my multi page form? Can you please help me? Also, how do I remove the previous button completely?
This should fix the basic alignment issue. Append this to your theme stylesheet.
body .gform_wrapper li, body .gform_wrapper form li {overflow:hidden!important}
I don't see the ready class styles applied for the multiple choice fields. Did you remove those? If so, then try adding the following class name to the fields in the form builder "gf_list_inline". That should work better for the simple yes/no layout.
you would add this to hide/remove the previous button
body #gform_previous_button_1_44 {display:none}
test screenshot: http://grab.by/8dzh
from there, you can tweak padding, and other things as necessary to get the look you want.
Thanks for the help! It's all starting to come together now. The last thing (Hopefully) I need help with is the address fields on the last page. Can you please check it out for me? I made several changes to the forms.css to get the descriptions positioned to the far right. But now I cannot get this last page aligned correctly.
Thank You!
Just a note. If you actually made changes to the form.css file in the plugin folder, you should probably move those to your theme's stylesheet. When you auto-update the plugin, the default forms.css file gets overwritten and you'll lose your changes.
There's even a note in the header of the CSS file to let you know this. Just FYI.
NOTE: DO NOT EDIT THIS FILE! MAKE MODIFICATIONS IN YOUR
THEME STYLESHEET. THIS FILE IS REPLACED DURING AUTO-UPDATES
AND ANY CHANGES MADE HERE WILL BE OVERWRITTEN.
You can always copy the forms.css file in it's entirety to your theme directory, link it up then go to the form settings page and set the "Output CSS" option to no. That way you're using your copy of the forms.css file and it won't be overwritten later. The caveat is that you will have to update your version with anything new that gets added in future versions of the file.
I'll take a look at the address fields, but so far the CSS looks pretty wacky. I'm not sure offhand what you'll need to do to fix it.
Well, here's the gist of it. You've got paddings, margins and widths that are all pushing the horizontal boundaries of your layout. That's causing elements to wrap in weird ways and jack up your layout. You need to revisit a couple of these rules to get closer to what you want.
my test screenshot: http://grab.by/8dXW
I changed line 149 to this - changed width value
.gform_wrapper .right_label div.ginput_complex,
.gform_wrapper .left_label div.ginput_complex {
float: left;
width: 36%;
}then, I changed line 222 to this - removed the 150px padding left property
.gform_wrapper .ginput_complex .ginput_left,
.gform_wrapper .ginput_complex .ginput_right,
.gform_wrapper .ginput_complex .ginput_full {
display: block;
min-height: 43px;
overflow: visible;
}You'll need to use inheritance to reduce the size of the individual inputs to finish cleaning everything up. As a note, the top label format usually works best when working with limited horizontal space and you have to do a lot less in the way of CSS modifications.
Okay, so I am trying to remove the previous button from the second part of my two part form entirely. Based on this post I tried adding the following code to my theme's style.css file, but it didn't remove the button. Any ideas?
body #gform_previous_button_1_44 {display:none}
P.S. the form is on a secure site that requires login so I can't provide a link. It would be nice if there was simply a checkbox on the two part form system that allowed a user to toggle whether or not to include the buttons at all.
