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
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.
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.
I would remove that rule from your stylesheet and you should be good to go.
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.
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.
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.
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}
