https://legacy.forums.gravityhelp.com/topic/margin-probs-using-jquery-ui-buttons-with-inline-radio-buttons Gravity Support Forums Topic: margin probs using jquery ui buttons with inline radio buttons en-US Fri, 17 Apr 2026 01:22:11 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/margin-probs-using-jquery-ui-buttons-with-inline-radio-buttons#post-31408 Tue, 02 Aug 2011 08:42:16 +0000 Kevin Flahaut 31408@https://legacy.forums.gravityhelp.com/ <p>Great. Thanks for the update. </p> https://legacy.forums.gravityhelp.com/topic/margin-probs-using-jquery-ui-buttons-with-inline-radio-buttons#post-31406 Tue, 02 Aug 2011 08:40:33 +0000 Richard Vav 31406@https://legacy.forums.gravityhelp.com/ <p>Thanks Kevin, that's sorted it. </p> https://legacy.forums.gravityhelp.com/topic/margin-probs-using-jquery-ui-buttons-with-inline-radio-buttons#post-31401 Tue, 02 Aug 2011 08:29:41 +0000 Kevin Flahaut 31401@https://legacy.forums.gravityhelp.com/ <p>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.</p> <pre><code>[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; }</code></pre> <p>screenshot: <a href="http://bit.ly/njiy2t" rel="nofollow">http://bit.ly/njiy2t</a></p> <p>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.</p> <pre><code>[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; }</code></pre> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/margin-probs-using-jquery-ui-buttons-with-inline-radio-buttons#post-31397 Tue, 02 Aug 2011 06:46:00 +0000 Richard Vav 31397@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/margin-probs-using-jquery-ui-buttons-with-inline-radio-buttons#post-31394 Tue, 02 Aug 2011 02:47:09 +0000 Richard Vav 31394@https://legacy.forums.gravityhelp.com/ <p>Hi Kevin,</p> <p>I have added that css but no luck, I even tried adding !important after the 0 but still no luck. </p> https://legacy.forums.gravityhelp.com/topic/margin-probs-using-jquery-ui-buttons-with-inline-radio-buttons#post-31358 Mon, 01 Aug 2011 16:47:03 +0000 Kevin Flahaut 31358@https://legacy.forums.gravityhelp.com/ <p>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.</p> <pre><code>[css] body #gform_wrapper_8 ul#gform_fields_8 li.gfield div.ginput_container ul#input_8_5.gfield_radio li label { margin: 0; }</code></pre> <p>screenshot: <a href="http://bit.ly/q7esBv" rel="nofollow">http://bit.ly/q7esBv</a> </p> https://legacy.forums.gravityhelp.com/topic/margin-probs-using-jquery-ui-buttons-with-inline-radio-buttons#post-31350 Mon, 01 Aug 2011 15:45:04 +0000 Richard Vav 31350@https://legacy.forums.gravityhelp.com/ <p>I have added a multiple choice field and set the css to gf_list_inline on a test form I have setup <a href="http://www.eandhbaxendale.com/test-2/" rel="nofollow">http://www.eandhbaxendale.com/test-2/</a><br /> 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.</p> <p>I have tried adding <code>.gform_wrapper li.gf_list_inline ul.gfield_radio li {margin:0 0 0 0}</code> with no luck. </p>