field width problem

Gravity Support Forums » Plugin Support » Gravity Forms

NZLNic
Member

Hi

My knowledge of code is very limited. I have built several sties using Genesis & have added Gravity Forms. I've noted that almost without exception the right border of the fields in the forms I create are not visible. They're extending beyond the body or sidebar area.

The theme and plugin are far too popular for others not to have had the same problem. My coder will normally fix the styling for me. (only recently discovered he should be using the Functions file in the theme!)

Here's an example on my current dev site is http://dd.ml.net.nz/contact-us.

Isn't it reasonable to expect the form to fit the constraint of the page without editing the stylesheet?

What code do I need to add to the functions file so the right border of the full width fields are visible?

Thanks

Posted 11 years ago on Thursday November 1, 2012 | Permalink
Kevin Flahaut
Administrator
The problem is a padding value added to the inputs by your theme. This isn't a Gravity Forms style.. but something specifically targeted to a Gravity Form by your theme itself.

You can see this rule on line 1367 of your theme's style.css file.
```
[css]
div.gform_wrapper input, div.gform_wrapper select, div.gform_wrapper textarea {
    font-size: 14px !important;
    padding: 4px 5px !important;
}
```
when that is disabled, you'll see that the right border of the inputs is visible as intended.

screenshot: http://bit.ly/X4Okw1

You can try adding this CSS rule to the end of your theme's style.css file or wherever you add custom CSS rules. This should override the previous rule with more specific CSS inheritance. This DOES NOT go in the functions file to be clear. It's simple CSS and is included in the theme's stylesheet.
```
[css]
body div.gform_wrapper ul.gform_fields li.gfield input[type=text],
body div.gform_wrapper ul.gform_fields li.gfield input[type=url],
body div.gform_wrapper ul.gform_fields li.gfield input[type=email],
body div.gform_wrapper ul.gform_fields li.gfield input[type=tel],
body div.gform_wrapper ul.gform_fields li.gfield input[type=number],
body div.gform_wrapper ul.gform_fields li.gfield input[type=password],
body div.gform_wrapper ul.gform_fields li.gfield select,
body div.gform_wrapper ul.gform_fields li.gfield textarea {
    padding: 4px 0 !important
}
```
Posted 11 years ago on Friday November 2, 2012 | Permalink