Multiple Choice on the same line? « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

mx2interests
Member

Is it possible to get the "choices" on the same line as the question.

In my case, I would like the options next to the question to try and save space.

Please see URL: http://simplequotelifeinsurance.com/quote-request

Posted 13 years ago on Friday May 6, 2011 | Permalink
Kevin Flahaut
Administrator
You can do that with some CSS manipulation. You'll probably need to float the label left and then tweak the list items themselves to get them to display inline.

Here's a quick sample.. You would add this to your theme stylesheet, then add the class name "yesno" to any of the fields you want formatted this way.
```
[css]
.yesno label {
    float: left;
}

.yesno ul.gfield_radio li {
    display: inline;
}

.yesno ul.gfield_radio li label {
    margin-left: 5px;
}

.yesno ul.gfield_radio li input {
    margin: 3px 0 0 10px!important;
}
```
screenshot: http://grab.by/a4gX

Please note: I haven't tested this in all the different browsers so you'll want to take this and tweak it a bit to suit your preferences. Good luck.
Posted 13 years ago on Friday May 6, 2011 | Permalink
mx2interests
Member

Thank you for the quick reply. I will start messing with it later. Thank you again.

Posted 13 years ago on Saturday May 7, 2011 | Permalink
mx2interests
Member

Still having problems with the code...could you please give an example. Thank you.

Posted 13 years ago on Sunday May 8, 2011 | Permalink
Kevin Flahaut
Administrator

I did give you an example above. I checked your link above and now the form isn't there.

Posted 13 years ago on Sunday May 8, 2011 | Permalink
mx2interests
Member

sorry about that....I am having trouble defining the fields

http://simplequotelifeinsurance.com/request-a-quote

Posted 13 years ago on Monday May 9, 2011 | Permalink

Here was what I am trying to do with no results

[css]
#main .post-12 .gform_wrapper .gform_body #field_3_7 .yesno label {float: left;}
.yesno ul.gfield_radio li { display: inline;}
.yesno ul.gfield_radio li label { margin-left: 5px;}
.yesno ul.gfield_radio li input {margin: 3px 0 0 10px!important;}

Posted 13 years ago on Monday May 9, 2011 | Permalink

Kevin Flahaut
Administrator

I looked at your form and inspected the markup. I don't see a "yesno" class being added to your field containers.

screenshot: http://grab.by/a5r7

You need to add that class name via the admin (CSS Class Name field) then you should start seeing some results. Right now you're defining rules for a class name that's not being implemented.

http://www.gravityhelp.com/documentation/page/Multiple_Choice

Posted 13 years ago on Monday May 9, 2011 | Permalink