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.

Wrong field sizes and radio button spacing

  1. wraycodesign
    Member

    Hi,

    I'm setting up a form and some of the fields are wonky. Even though I selected “Large” for the field width for “School” it’s showing up as small/short and so are the medium phone fields, etc.

    Also, the zip code in the "advanced" address field is right aligned and also the radio buttons have huge spaces to the right.

    Amanda

    http://www.coachstrobl.com/scoringfactory/clinics/clinic-sign-up

    Posted 11 years ago on Thursday November 18, 2010 | Permalink
  2. Hi Amanda,

    The problem is poor CSS rules in your theme. On line 498 of your theme's style.css file, there is a rule that sets ALL inputs in the content area to 80px wide. The fields are inheriting from this. If I disable that rule, you can see that the fields are formatted normally.

    screenshot

    That's also the cause of the radio/checkbox field size problems. Those are inputs too so they're inheriting the same, sloppy, blanket CSS rule.

    screenshot

    I would remove that rule from your stylesheet and you should be good to go.

    Posted 11 years ago on Thursday November 18, 2010 | Permalink
  3. wraycodesign
    Member

    Thanks, Kevin. That was my sloppy code. I'm just starting to learn how to style forms and was trying to style the contact page form. The only remaining issue now is the zip code box and also this form is affecting the background image (moving it up). The other pages look fine. Just this one has the background image too high.

    Posted 11 years ago on Thursday November 18, 2010 | Permalink
  4. I don't see any problems with the zip code alignment. What browser are you seeing this in?

    Also, I can't see where the form would be affecting the background position of the parent container. I can't tell you anything definite about that.

    Posted 11 years ago on Thursday November 18, 2010 | Permalink
  5. wraycodesign
    Member

    I just switched from percent positioning to pixels and that fixed the problem on that page for the most part. Thanks!

    Zipcode was showing up as right aligned in Chrome and Safari for Mac. Also, it's longer than I'd like but since it's part of a grouping I wasn't able to give it its own class name.

    Posted 11 years ago on Thursday November 18, 2010 | Permalink
  6. The zip code field is wrapped in a span with a unique ID as does the input field. You can use CSS inheritance to style anything else from there.

    .gform_wrapper span#input_1_2_5_container input#input_1_2_5 {width:100px!important}

    Posted 11 years ago on Thursday November 18, 2010 | Permalink