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.

styling radio buttons

  1. 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 10 years ago on Friday September 9, 2011 | Permalink
  2. 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 10 years ago on Friday September 9, 2011 | Permalink
  3. 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 10 years ago on Friday September 9, 2011 | Permalink
  4. 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 10 years ago on Friday September 9, 2011 | Permalink
  5. You're the best, thanks Kevin.

    Adrian

    Posted 10 years ago on Friday September 9, 2011 | Permalink
  6. Thanks Adrian. I'm happy I could help out. Let us know if you need anything else. Happy Friday!

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

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