Richard Vav
Administrator
I have added a multiple choice field and set the css to gf_list_inline on a test form I have setup http://www.eandhbaxendale.com/test-2/
I have added the jquery ui script and css to turn the multiple choice field into a jquery radio button set. The only problem is there are large gaps between the buttons, I am looking to kill the gaps altogether.
I have tried adding .gform_wrapper li.gf_list_inline ul.gfield_radio li {margin:0 0 0 0} with no luck.
The margin you're seeing is on the label and not the list item. You can try this instead. It removes the left margin from the labels on those fields.
[css]
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/q7esBv
Richard Vav
Administrator
Hi Kevin,
I have added that css but no luck, I even tried adding !important after the 0 but still no luck.
Richard Vav
Administrator
As a test I have added a second multiple choice field made it a jquery button set but haven't applied the css you suggested, the result is that the gap is much larger than on the original, so the css you suggested to 0 the margin is working but there is another element that is still adding a margin or padding between the buttons.
I don't think the problem is coming from the jquery ui css because I use the same file to style the buttons on the original form and they don't have the gaps between the buttons.
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.
Richard Vav
Administrator
Thanks Kevin, that's sorted it.
Great. Thanks for the update.