styling radio buttons « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

I have just created a form on one of my pages that you can see here: http://www.primarycarecommunity.net/beamentor/
but as you can see, the radio buttons and the text area description are out of line to the rest of the form.
I do have a little bit in my css for inputs and labels:

#left form		{margin-left: 50px; }
#left input	{margin-right: 20px; margin-bottom: 15px; padding: 3px;}
#left label		{width: 7em;}

But what would I put in the css to bring my radio buttons and the text area description in to line, the html for the radio buttons is follows:

<li id='field_6_5' class='gfield               gfield_contains_required' >
				<label class='gfield_label'>GMS/PMS Practice<span class='gfield_required'>*</span></label>
				<div class='ginput_container'>
				<ul class='gfield_radio' id='input_6_5'>
				<li class='gchoice_5_0'>
				<input name='input_5' type='radio' value='GMS'  id='choice_5_0' tabindex='5'   />
				<label for='choice_5_0'>GMS</label></li>
				<li class='gchoice_5_1'>
				<input name='input_5' type='radio' value='PMS'  id='choice_5_1' tabindex='6'   />
				<label for='choice_5_1'>PMS</label></li>
				</ul></div></li>

Posted 12 years ago on Friday September 9, 2011 | Permalink

Kevin Flahaut
Administrator

Yeah, that's really lazy CSS work. Applying blanket styles to elements is not the way to go when you're working with dynamic content.

You'll need to add a couple of new rules to the end of your theme stylesheet to overcome the ones in the theme.

[css]

body .gform_wrapper .gfield_checkbox li input[type=checkbox],
body .gform_wrapper .gfield_radio li input[type=radio],
body .gform_wrapper .gfield_checkbox li input {
    margin-top: 2px 0 0 0 !important;
    padding: 0!important
}

body .gform_wrapper .left_label .gfield_label,
body .gform_wrapper .right_label .gfield_label {
	width: 29% !important
}

screenshot: http://bit.ly/oGaMoO

Posted 12 years ago on Friday September 9, 2011 | Permalink

djadejones
Member

That worked great, sorry for the sloppy css but I am quite new to it and only do it the way I know at present...
One last thing, which element is it that gives the radio buttons text its width? As you can see on the clinical system question, the options are quite squashed up.

Thanks Kevin :-)

Adrian

Posted 12 years ago on Friday September 9, 2011 | Permalink
Kevin Flahaut
Administrator
Oops. I forgot to include that in my first example. Those are labels too and are inheriting from the 7em width restriction in the theme styles. You don't want to restrict those to specific width there or they get all "squashed up". Try adding this one additional rule to the end of your theme stylesheet.
```
[css]
body .gform_wrapper .gfield_checkbox li label,
body .gform_wrapper .gfield_radio li label {
    width: auto !important
}
```
Posted 12 years ago on Friday September 9, 2011 | Permalink
djadejones
Member

You're the best, thanks Kevin.

Adrian

Posted 12 years ago on Friday September 9, 2011 | Permalink
Kevin Flahaut
Administrator

Thanks Adrian. I'm happy I could help out. Let us know if you need anything else. Happy Friday!

Posted 12 years ago on Friday September 9, 2011 | Permalink

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