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.

margin probs using jquery ui buttons with inline radio buttons

  1. 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.

    Posted 13 years ago on Monday August 1, 2011 | Permalink
  2. 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

    Posted 13 years ago on Monday August 1, 2011 | Permalink
  3. 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.

    Posted 13 years ago on Tuesday August 2, 2011 | Permalink
  4. 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.

    Posted 13 years ago on Tuesday August 2, 2011 | Permalink
  5. 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
  6. Richard Vav
    Administrator

    Thanks Kevin, that's sorted it.

    Posted 13 years ago on Tuesday August 2, 2011 | Permalink
  7. Great. Thanks for the update.

    Posted 13 years ago on Tuesday August 2, 2011 | Permalink

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