Styling Ready Classes Adjusting Column/Input Widths

Gravity Support Forums » Plugin Support » Gravity Forms

mssbeen
Member

I am working on my first form. After a long day of trying solutions from the forum to create a form with three inputs in a row, I updated forms.css to 1.5 and have applied the css ready classes to my form. Now I have the city, state and zip in one row; however, I would like to adjust the sizes of the input areas. I have developed what I want in firebug, but when I applied the code to my style sheet there were no changes.

'#gform_wrapper_2 #field_2_11 li .gfield .gf_left_third {width: 251px;}
#gform_wrapper_2 #field_2_13 li .gfield .gf_left_third {width: 85px; margin-left: 3px;}'

http://testblog.artizondigital.com/join-yei/become-a-yei-student/

If I could figure out the code to use here I would be set to go.
I appreciate any help anyone has to offer

Posted 14 years ago on Tuesday November 30, 2010 | Permalink
Kevin Flahaut
Administrator
You specified the CSS inheritance incorrectly in your rules. There is no child list item inside the list items with the unique ID that you're targeting. This should work for you.
```
#gform_wrapper_2 li#field_2_11 {width:251px}
#gform_wrapper_2 li#field_2_13 {width:85px; margin-left:3px}
```
test screenshot: http://grab.by/7EHd
Posted 14 years ago on Tuesday November 30, 2010 | Permalink
mssbeen
Member

Thank you very much that works perfectly and makes perfect sense.

Posted 14 years ago on Tuesday November 30, 2010 | Permalink
Kevin Flahaut
Administrator

Wonderful, thanks for the update.

Posted 14 years ago on Tuesday November 30, 2010 | Permalink
Robert Lang
Member

No worries, its answered before I could write it up. Great response Kevin:0

Posted 14 years ago on Tuesday November 30, 2010 | Permalink
Kevin Flahaut
Administrator

Robert, the inputs are set as a percentage of the container. It doesn't really matter if the input is a select, that's not really important here. We just needed to target and resize the containing list item.

Thanks for the input. It's appreciated.

Posted 14 years ago on Tuesday November 30, 2010 | Permalink
Robert Lang
Member

I deleted my code when I saw yours done, thx.

Posted 14 years ago on Tuesday November 30, 2010 | Permalink
mssbeen
Member

This fixed the scroll bars appearing around the form in IE7 only.

http://forum.gravityhelp.com/topic/layout-problems-in-gravity-forms-15-beta-34

body .gform_wrapper ul.gform_fields {overflow:visible}

Posted 14 years ago on Saturday December 4, 2010 | Permalink
mssbeen
Member

Just so the developers know, the scroll bars appear in the preview in IE7. The post I mention above suggested:

"The best way to determine if formatting issues are related to the default forms vs. your theme is to see if the form is properly formatted in the preview page. if so, it's inheriting some additional properties from your theme."

This logic would point to the problem be independent of the theme styles. The problem is the check box section.

Posted 14 years ago on Saturday December 4, 2010 | Permalink