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.

align multiple choice box all the way over

  1. 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 http://mnhomesearch.org

    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.

    2. move the 2nd multiple choice radio buttons slightly to the right so that 'contact me' is on one line

    3. have the phone & email radio buttons aligned horizontally

    Sorry for being such a perfectionist

    Posted 12 years ago on Saturday September 3, 2011 | Permalink
  2. 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.

    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.

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

    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.

    Posted 12 years ago on Saturday September 3, 2011 | Permalink
  3. 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.

    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)?

    Posted 12 years ago on Saturday September 3, 2011 | Permalink
  4. 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.

    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.

    [css]
    body #gform_wrapper_1 {
        padding: 0 0 0 6px;
    }

    Here's the result: http://bit.ly/neOWrg

    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.

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

    Posted 12 years ago on Saturday September 3, 2011 | Permalink
  5. ok, your way was much easier :)

    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.

    Posted 12 years ago on Saturday September 3, 2011 | Permalink
  6. Try adding these to the end of your stylesheet. They should tighten up the vertical margins/padding for just this form.

    [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
    }

    screenshot: http://bit.ly/nIK1vA

    Posted 12 years ago on Saturday September 3, 2011 | Permalink
  7. The styling is perfect, now I just have one last question....

    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?

    Posted 12 years ago on Thursday September 8, 2011 | Permalink
  8. 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 -> hide the email field. It's not actually replacing anything, just showing and hiding the fields for the same effect.

    Posted 12 years ago on Thursday September 8, 2011 | Permalink
  9. I do this a lot (offer a choice between phone and email, then reveal the input area for whatever they choose.)

    One example:
    http://www.mainevacationrentalsonline.com/contact-us

    Click the radio buttons for phone/email to see how it works

    Posted 12 years ago on Friday September 9, 2011 | Permalink