I've just purchased Gravity Forms and have been playing with the inline setting and custom CSS Classes to align fields horizontally. But all the field widths are slightly different. Aesthetically it doesn't look very pleasing. Is there a way to force the left and right edges of the outermost fields to all align vertically?
PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.
Easy way to justify Gravity Forms left and right?
-
The inline style is intended to align differently sized fields horizontally. The field widths are set to "auto" so they flow inline more like text would. If you want fields to align more uniformly, try using one of the 2 or 2 column Ready Classes - "gf_2col" or "gf_3col"
http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes
you could try adding a new rule to set a consistent width to the inline class in your theme stylesheet.. something like this.. just replace the "XX" with your actual form id
[css] body #gform_wrapper_XX.gform_wrapper .top_label li.gfield.gf_inline { width: 150px; }That might get you closer if you want to stick with the inline style as a base.. you'll probably want to tweak it a bit to suit your preference.
Posted 12 years ago on Thursday September 15, 2011 | Permalink -
rumblefish
MemberThank you! That was very helpful. After I posted I realised I can probably tweak individual fields in the CSS, but maybe a general setting like you said might help.
One more thing that's throwing me. At present I have some fields aligned inline as two columns using gf_left_half and gf_right_half. But the other fields that are standard single columns are not justifying to the left as much as the gf_left_half fields. Is there a way to make them all align to the same left limit?
ps What is the "form Id" that you posted previously? I don't understand...
Posted 12 years ago on Thursday September 15, 2011 | Permalink -
Okay, I'm pretty good at visualizing most stuff but a link to your form would be most helpful so I can see exactly what you're talking about. It's difficult to say exactly what might be what.. it's probably a theme style inheritance issue, but I can't say without eyeballing it and checking out the CSS.
You can find the form ID by looking at the form list in the admin, or by viewing the page source and looking at the code.. You'll see the form ID used in various places there like "gform_wrapper_1" where "1" is the form ID.
screenshot: http://bit.ly/qZVP2y
In the upcoming 1.6 version, the form ID and field ID's are displayed more prominently in the admin to help identify them more easily. That's available for download if you want to tinker with it, but it is still a beta version and while stable, not something I would recommend for a production website just yet.
Posted 12 years ago on Thursday September 15, 2011 | Permalink -
rumblefish
MemberI can't show you the site right now because I'm building it in MAMP - it's offline. I think I will do the best I can for now and try and tweak the size and distribution of the fields in CSS afterwards. You may be right, the theme I'm using (Shoutbox - from Themeforest) might be doing strange things to the form. Thanks for your help all the same Kevin!
There is no Ready Class to keep the fields locked to the left? I'm guessing it should be set as default, but something's not quite right.
I tried gf_2col and gf_3col but I couldn't see what they were actually doing. The results were the same. Is it to set the maximum width of the field? How would those work inline? Don't they need sub commands to position the individual fields (like gf_left_half/gf_right_half)?
Sorry, I'm a total newbie with Gravity and CSS in general!
Posted 12 years ago on Thursday September 15, 2011 | Permalink -
Yeah, I would just rock on with it and when you have a live version I can look at I'll be able to help more. You can always check your form in the form preview and see what it looks like there.. that's not influenced by the theme styles at all.
I'm not sure what you mean by locking the fields to the left, but again, we can take a fresh look at it when you've got something publicly accessible. I'm sure it's going to be just a few tweaks here and there to get you where you want to be.
Posted 12 years ago on Thursday September 15, 2011 | Permalink -
rumblefish
MemberI think it's the theme. In the WP preview everything looks aligned ok to the left. As soon as its in the theme, anything that isn't set to be gf_left_half is about 10 pixels further to the right of the left edge. Maybe there's some padding or margin that's set by the the theme, but I cant find it. I'll try and upload this tomorrow so you can take a look. Thanks Kevin.
Posted 12 years ago on Thursday September 15, 2011 | Permalink -
Sure thing. I'll be happy to help you whip it into shape :)
Posted 12 years ago on Thursday September 15, 2011 | Permalink -
rumblefish
MemberI think I found it!
There is a piece of Style.css in the theme which is setting a list margin to 17px. That's what's throwing the default alignment out. If I set it to 0 in Firebug, all the columns align correctly to the left edge.
Good old Firebug. Really handy tool. Pity Firefox is so bloated now though...
Thanks again Kevin!
Posted 12 years ago on Thursday September 15, 2011 | Permalink -
Ha. Good catch. Tell me about it. Firebug is the only reason I keep Firefox open most of the time. If not for that, it would be relegated to an open occasionally to test with thing.
Posted 12 years ago on Thursday September 15, 2011 | Permalink
This topic has been resolved and has been closed to new replies.