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.

possible CSS conflict on field widths

  1. 3cstudio
    Member

    Hi,

    On: http://test.hollandbuscompany.com/contact-us/

    Just wanted to see if there was a good fix for this -- noticed it in the last 2 installs of Gravity Forms:
    - end of fields' border for things such as Email Address or Name (Last) won't show
    - which leaves the field being 3-sided for a border, while right edge remains white

    I found that if I eliminated from line 237 of: /wp-content/plugins/gravityforms/css/forms.css?ver=1.6.11:

    .gform_wrapper .ginput_complex .ginput_right input, .gform_wrapper .ginput_complex .ginput_right select {width:96% !important}

    the earlier code (from line 231) would take effect and show the right-side border properly:

    .gform_wrapper .ginput_complex input, .gform_wrapper .ginput_complex select {width:95% !important}

    Seems that single percentage point makes the 1px right-border 'disappear'? If you need a better explanation, I can post a screenshot if needed.

    Just wanted to point this out in case it is something that can be fixed permanently instead of a temporary adjustment to the plugin styles or constant new addition to each theme's general style.css . . . thanks!

    Steve C.
    3Cstudio

    Posted 7 years ago on Friday December 21, 2012 | Permalink
  2. You should not modify the plugin css. You can override the styles in your theme's stylesheet. The issue is that your theme has included some Gravity Forms-specific CSS. Take a look at http://test.hollandbuscompany.com/wp-content/themes/startbox/includes/styles/startbox.css?ver=3.5 line 766:

    [css]
    body .gform_wrapper input[type="text"], body .gform_wrapper textarea {
        border: 1px solid #AAAAAA;
        color: #333333;
        font-size: 1em;
        padding: 5px;
    }

    That padding: 5px; is fouling things up and causing the border to disappear. Please override your theme by using this CSS:

    [css]
    body .gform_wrapper input[type="text"],
    body .gform_wrapper textarea {
      padding: 0px!important;
    }

    Screenshot: http://minus.com/lbcpcnvv8guJkK

    Posted 7 years ago on Friday December 21, 2012 | Permalink
  3. 3cstudio
    Member

    Thanks Chris!

    Posted 7 years ago on Saturday December 22, 2012 | Permalink
  4. You're welcome.

    Posted 7 years ago on Saturday December 22, 2012 | Permalink

This topic has been resolved and has been closed to new replies.