Display multiple choice as horizontal not vertical

Gravity Support Forums » Plugin Support » Gravity Forms

Elise
Member

Hi,

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

Thanks,
Elise

Posted 13 years ago on Tuesday February 22, 2011 | Permalink
Elise
Member

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 13 years ago on Tuesday February 22, 2011 | Permalink
Kevin Flahaut
Administrator

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.

http://www.gravityhelp.com/documentation/css-ready-classes/

Posted 13 years ago on Tuesday February 22, 2011 | Permalink
Elise
Member

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

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

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