Yeah, I never said the problem was with the jQuery UI CSS. The CSS rule I gave you previously is being applied properly even without the !important declaration - I can see that in the inspector. The problem is that you've applied the "gf_list_inline" Ready Class as well and it's adding a left margin to the containing list item now. You'll have to add that to your rule to defeat the margin in this case. Replace the previous CSS snippet with this one and it should do the trick.
[css]
body #gform_wrapper_8 ul#gform_fields_8 li.gfield div.ginput_container ul#input_8_5.gfield_radio li,
body #gform_wrapper_8 ul#gform_fields_8 li.gfield div.ginput_container ul#input_8_5.gfield_radio li label {
margin: 0;
}
screenshot: http://bit.ly/njiy2t
If you'll notice, that rule is specific to only one radio button list based on the parent UL ID. This was intentional so the styles wouldn't conflict with any other normal radio lists you may have. If you want to apply this same CSS to multiple instances of a radio list, I would suggest using a custom CSS class name added to each field. In this example, I used "fancyradio" but you can change it to whatever you prefer.
[css]
body .gform_wrapper ul.gform_fields li.gfield.fancyradio div.ginput_container ul.gfield_radio li,
body .gform_wrapper ul.gform_fields li.gfield.fancyradio div.ginput_container ul.gfield_radio li label {
margin: 0;
}
Once you've added that snippet to your CSS file you should be able to add "fancyradio" as the CSS Class name for any radio field and have the rule applied.
Posted 13 years ago on Tuesday August 2, 2011 |
Permalink