idealists
Member
I'm wanting to group fields together (1 drop down, and 2 text boxes), kind of like the Advanced Fields (Name). I think we can't (yet) create our own advanced fields (correct me if I'm wrong).
How could I, with CSS (my CSS is fairly rusty), group 3 fields on the ONE single line, considering the surrounding DIVs and LIs on each field.
I only want to do this with some of the fields, not all.
Thanks.
There's no grouping feature yet, but with the addition of freeform HTML blocks in the next release, you could use those to wrap fields in divs, fieldsets, or whatever you like.
We've talked about eventually adding a way to create your own reusable field groups, but that's going to be sometime further down the line.
In this scenario (3 fields in one line) You would float the first 2 fields left. The third field will naturally float up with them assuming there's enough room. You'll need to set a new width on the fields as well. It would look something like this for 3 fields.
#field_2_3, #field_2_4 {float:left;}
#field_2_3, #field_2_4, #field_2_5 {width:30%;}After that, you'll probably want to go to your form admin, and set the field size to "large". The field size is a percentage of the parent container, so if you make your container smaller, the fields end up smaller.. resetting the field size usually is enough, but you can always target the specific input and reset the width with some CSS if desired.
And here's the result on my test form
Sorry, I missed your reply earlier. If you'd like to share a URL to your form page, I'll be happy to take a look at it and see what's happening.
Hi Kevin,
I was wondering if you can help me out with a similiar issue i have:
url: http://www.simpleonlinesolutions.biz/en/test-2/
i want to have these 3 fields in one row.
i created a seperate CSS file "gravityform3column.css", containing:
#field_2_1 {float:left;}
#field_2_2 {width:30%;}
#field_2_3 {width:30%;}
this style sheet is imported in my theme's stylesheet using:
@import url("http://www.simpleonlinesolutions.biz/wp-content/custcss/gravityform3column.css");
somehow it looks to me the style of #flield_2_1 is not applied ?
Am i missing something here?
Thanks,
Jurgen
@jurgen
There is a CSS Ready Class style that will do what you need without having to add additional styles yourself. Go to each field in the admin, click on it to edit the properties, click on the advanced tab and you'll see the "CSS Class Name" field. Add "gf_inline" as the new class name for each field then save your form.
my test screenshot: http://d.pr/TtUG
http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes
note: this is the newest "ready class" style that I added and I haven't included it with the other documentation just yet. The implementation is the same as on the other classes though.
