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.

Address fields right edge are being cut off

  1. jeffhiggins
    Member

    I'm having an issue with the "address" form field's right side edge being cut off. This seems to happen no matter how big the page is.

    Example: http://jeffhiggins.ca/procare/contact/

    I've tried messing with the padding settings in my CSS but to no avail. Any ideas? Thanks!

    Posted 7 years ago on Wednesday April 18, 2012 | Permalink
  2. Try dropping this into your theme's CSS:

    [css]
    .gform_wrapper .ginput_complex .ginput_full input {
    width: 92% !important;
    }
    .gform_wrapper .ginput_complex .ginput_right input, .gform_wrapper .ginput_complex .ginput_right select, .gform_wrapper .field_name_first input, .gform_wrapper .ginput_complex .ginput_left input {
    width: 84% !important;
    }

    Also, I deactivated/removed the min-width/max-width on this selector as well:

    [css]
    input[type="text"], input[type="password"], input[type="email"], textarea, select {
    border: 1px solid #CCC;
    padding: 0px 0px;
    outline: none;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #777;
    margin: 0;
    min-width: 190px;
    max-width: 100%;
    display: block;
    margin-bottom: 0px;
    background: white;
    }
    Posted 7 years ago on Wednesday April 18, 2012 | Permalink
  3. jeffhiggins
    Member

    Thanks for the super-fast reply Rob. I tried dropping your code snippet and change in, but it didn't seem to work. Then I I tried commenting out the entire "form" section in my CSS (which I'm not a big fan of anyway), and left your new code snippet, and it did work. But then my form fields became comically large. I've left it with my form CSS commented out, but can you tell me how to make the fields appear smaller?

    Thanks again!

    Posted 7 years ago on Wednesday April 18, 2012 | Permalink
  4. No problem, this padding here in your stylesheet is causing the comically large inputs (LOL - like the descriptor on that one):

    [css]
    input {
    padding: 10px !important;
    font-size: 11px !important;
    }
    Posted 7 years ago on Wednesday April 18, 2012 | Permalink
  5. jeffhiggins
    Member

    ;) Thanks Rob. I tried dropping that into the CSS but the fields are still super big. Any ideas? Sorry to be a pain.

    Posted 7 years ago on Wednesday April 18, 2012 | Permalink
  6. No that exists already in your stylesheet. The 10px padding is the cause. That's not a fix. I was just pointing it out.

    If you want to keep that you'll need to target GF's inputs to override it, for example:

    [css]
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=text],
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=email],
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel],
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=url],
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=number],
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=password],
    body .gform_wrapper .gform_body .gform_fields .gfield select {
    	padding:5px 0;
    }

    You can then change the padding to how you see fit.

    Posted 7 years ago on Wednesday April 18, 2012 | Permalink
  7. jeffhiggins
    Member

    Whoops, sorry! Got it working. I tried the override code first, but that didn't seem to work. I eventually tracked down the input padding code (this theme has like 10 different spaghetti CSS files) and was able to get the fields down to a sensible size.

    Thanks a ton Rob! Gravity Forms is worth every penny.

    Posted 7 years ago on Wednesday April 18, 2012 | Permalink
  8. Right on man, glad to help out!

    Posted 7 years ago on Wednesday April 18, 2012 | Permalink

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