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.

Display multiple choice as horizontal not vertical

  1. Elise


    Just wondering if someone can tell me how I can make the multiple choice radio buttons display horizontally instead of vertically?


    Posted 9 years ago on Tuesday February 22, 2011 | Permalink
  2. Elise

    Ok so I got it to display horizontally but now I can't change the padding on the li label. At the moment the radio button text is right against the radio button beside it.

    When I changed the padding in Firebug it worked but when I then pasted the code into my themes css it didn't work ....

    I did this to make it display horizontally (and it worked):
    .gfield_radio li {display:inline; float:left;}

    I changed the padding here:
    .gform_wrapper .gfield_checkbox li label, .gform_wrapper .gfield_radio li label {line-height: 1.5; margin: 0 0 0 24px; padding: 0 20px 0 0; vertical-align: middle; width: auto;}

    This code worked in firebug but not in the css.

    Any ideas?

    Posted 9 years ago on Tuesday February 22, 2011 | Permalink
  3. It could be a variety of reasons it works in Firebug and not elsewhere. Can you just post a link to your form. It will be easier to take a look at it and help you out.

    If you're using the 1.5 beta version, you can take advantage of the new CSS "Ready Classes" and just apply the "gf_list_inline" class name to the field without having to add your own CSS.

    Mored details on those are here.

    Posted 9 years ago on Tuesday February 22, 2011 | Permalink
  4. Elise

    Thanks Kevin! I've just used the 3 column class and that worked wonderfully. Your a gem!

    Posted 9 years ago on Wednesday February 23, 2011 | Permalink

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