https://legacy.forums.gravityhelp.com/topic/align-multiple-choice-box-all-the-way-over Gravity Support Forums Topic: align multiple choice box all the way over en-US Tue, 21 Apr 2026 14:54:05 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/align-multiple-choice-box-all-the-way-over#post-34900 Fri, 09 Sep 2011 02:03:29 +0000 Chris Hajer 34900@https://legacy.forums.gravityhelp.com/ <p>I do this a lot (offer a choice between phone and email, then reveal the input area for whatever they choose.)</p> <p>One example:<br /> <a href="http://www.mainevacationrentalsonline.com/contact-us" rel="nofollow">http://www.mainevacationrentalsonline.com/contact-us</a></p> <p>Click the radio buttons for phone/email to see how it works </p> https://legacy.forums.gravityhelp.com/topic/align-multiple-choice-box-all-the-way-over#post-34880 Thu, 08 Sep 2011 18:47:12 +0000 Kevin Flahaut 34880@https://legacy.forums.gravityhelp.com/ <p>Yeah, you should be able to hide the email field with conditional logic the same way you're showing the phone field.. if Phone is selected -&gt; hide the email field. It's not actually replacing anything, just showing and hiding the fields for the same effect. </p> https://legacy.forums.gravityhelp.com/topic/align-multiple-choice-box-all-the-way-over#post-34871 Thu, 08 Sep 2011 17:14:10 +0000 bgoheen 34871@https://legacy.forums.gravityhelp.com/ <p>The styling is perfect, now I just have one last question....</p> <p>using the conditional option, I have it setup where the 'contact me by' default is email and the email field is shown. If a user selects phone instead, the phone field appears. Is there a way for the phone field to REPLACE the email field when that option is selected? </p> https://legacy.forums.gravityhelp.com/topic/align-multiple-choice-box-all-the-way-over#post-34353 Sat, 03 Sep 2011 12:31:23 +0000 Kevin Flahaut 34353@https://legacy.forums.gravityhelp.com/ <p>Try adding these to the end of your stylesheet. They should tighten up the vertical margins/padding for just this form.</p> <pre><code>[css] .sidebar-widget #gform_wrapper_1.gform_wrapper ul li { list-style: none; padding: 0 } .sidebar-widget #gform_wrapper_1.gform_wrapper .gform_footer { padding:0 } .sidebar-widget #gform_wrapper_1.gform_wrapper ul.gfield_checkbox, .sidebar-widget #gform_wrapper_1.gform_wrapper ul.gfield_radio { margin:0 }</code></pre> <p>screenshot: <a href="http://bit.ly/nIK1vA" rel="nofollow">http://bit.ly/nIK1vA</a> </p> https://legacy.forums.gravityhelp.com/topic/align-multiple-choice-box-all-the-way-over#post-34342 Sat, 03 Sep 2011 11:20:51 +0000 bgoheen 34342@https://legacy.forums.gravityhelp.com/ <p>ok, your way was much easier :)</p> <p>I tweaked the settings like you suggested and it looks just like the example. So for the vertical space issue, do I need to target each item specifically? There is a ton of information in the tutorial link you provided and I'm confused on which option to use. </p> https://legacy.forums.gravityhelp.com/topic/align-multiple-choice-box-all-the-way-over#post-34336 Sat, 03 Sep 2011 09:55:01 +0000 Kevin Flahaut 34336@https://legacy.forums.gravityhelp.com/ <p>Take the "gf_left_half" class off that field and the labels will span the form width. They're being constrained by the class you added.</p> <p>Also, I don't see any difficulty changing to the top label. Check out my test.. swapped the form to the "top label" option, applied the "gf_list_inline" Ready Class to the 2nd and 3rd set of radio buttons and then added one additional rule to the CSS to add some padding to the left so the form aligned properly in the space.</p> <pre><code>[css] body #gform_wrapper_1 { padding: 0 0 0 6px; }</code></pre> <p>Here's the result: <a href="http://bit.ly/neOWrg" rel="nofollow">http://bit.ly/neOWrg</a></p> <p>You could always tweak the vertical space between the list items. They're inheriting some additonal margin rules from your theme but you can override that if you use proper CSS specificity when targeting the element. You can find examples of how to do that here.</p> <p><a href="http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples" rel="nofollow">http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples</a> </p> https://legacy.forums.gravityhelp.com/topic/align-multiple-choice-box-all-the-way-over#post-34335 Sat, 03 Sep 2011 09:19:52 +0000 bgoheen 34335@https://legacy.forums.gravityhelp.com/ <p>I tried switching to the top label option and it looks like I'll have to do a ton of CSS tweaking with that as well. So I'll probably just stick with the left aligned option now.</p> <p>How do I get the text for the 1st set of radio buttons to span both columns (so the text is on the same line for each option)? </p> https://legacy.forums.gravityhelp.com/topic/align-multiple-choice-box-all-the-way-over#post-34333 Sat, 03 Sep 2011 08:42:16 +0000 Kevin Flahaut 34333@https://legacy.forums.gravityhelp.com/ <p>Your best bet here.. both for appearance and to fit the available space is to go with the default "top label" option for this form. That always works best when you're dealing with limited horizontal space. You'll find that option in the form settings panel.</p> <p>If you're using the top label option, then you can apply one of the CSS Ready Classes to the 3rd set of radio buttons to align them horizontally. Try using the "gf_list_inline" ready class on that field and it should do exactly what you want.</p> <p><a href="http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes" rel="nofollow">http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes</a></p> <p>If for some reason you're married to the cramped left label look, then you're going to have to target each of the specific label elements, lists, etc. and do quite a bit of CSS manipulation to tweak everything. </p> https://legacy.forums.gravityhelp.com/topic/align-multiple-choice-box-all-the-way-over#post-34330 Sat, 03 Sep 2011 02:37:57 +0000 bgoheen 34330@https://legacy.forums.gravityhelp.com/ <p>I'm tweaking my form that is located in a sidebar, so I'm working with limited space. Here's what I'd ultimately like to do with the 'contact the agent' form on my website <a href="http://mnhomesearch.org" rel="nofollow">http://mnhomesearch.org</a> </p> <p>1. make the 1st multiple choice (showing and more information) radio buttons align all the way to the left, so the text is on one line.</p> <p>2. move the 2nd multiple choice radio buttons slightly to the right so that 'contact me' is on one line</p> <p>3. have the phone &amp; email radio buttons aligned horizontally </p> <p>Sorry for being such a perfectionist </p>