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.

field width problem

  1. 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 6 years ago on Thursday November 1, 2012 | Permalink
  2. 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 6 years ago on Friday November 2, 2012 | Permalink