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.

Form width and scrolling issue

  1. The form i have on a site is getting cut off on the right side. Then if you tab across fields [ in IE] or you type in a really long last name, the whole form shifts a few pixels over to the right.

    There seems to be padding interfering with the form, but I can't seem to figure out where it's coming from.

    http://pattysheehanandfriends.org/volunteers/

    Thank,

    -M

    Posted 8 years ago on Thursday April 14, 2011 | Permalink
  2. Part of your issue is the padding applied to the inputs by your theme stylesheet - default.css line 1822

    [css]
    #contentbox form input {
        padding: 5px;
    }

    then, there is a width set on the form element itself - default.css line 1816

    [css]
    #contentbox form {
        padding: 0 0 20px;
        position: relative;
        width: 580px;
    }

    You should be able to override those by putting this at the end of your theme stylesheet.

    [css]
    body #contentbox .gform_wrapper form {
    	width:auto
    }
    
    body #contentbox .gform_wrapper form input[type=text],
    body #contentbox .gform_wrapper form input[type=tel],
    body #contentbox .gform_wrapper form input[type=url],
    body #contentbox .gform_wrapper form input[type=email],
    body #contentbox .gform_wrapper form input[type=file],
    body #contentbox .gform_wrapper form input[type=password],
    body #contentbox .gform_wrapper form input[type=number] {
    	padding:5px 0;
    }

    notice I chose to target the inputs by type rather than apply a blanket rule that would unnecessarily add padding to radio buttons & checkboxes which are inputs too.

    test screenshot: http://d.pr/6PxV

    Posted 8 years ago on Thursday April 14, 2011 | Permalink
  3. Awesome, Thank you!

    -M

    Posted 8 years ago on Thursday April 14, 2011 | Permalink
  4. Rubiwane
    Member

    Hi Kevin,
    I think i have the same problem.
    Is it possible for you to take a look?
    I m novice and i don t want to touch CSS if i m not sure.
    My form is here:
    http://rt2012-attestation.com/test-formulaire-css/

    Thanks you :)

    Posted 6 years ago on Monday January 14, 2013 | Permalink
  5. @Rubiwane, I responded to your other topic already and will close this one, as it is over a year old and unrelated.

    Posted 6 years ago on Monday January 14, 2013 | Permalink

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