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.

Radio Boxes Misalignment

Gravity Support Forums » Plugin Support » Gravity Forms

  1. Aquanauts
    Member

    I'm sure this has something to do with theme, not the plugin, but I could use some help, as you might be able to quickly diagnose the root of my problem.

    Finally finished the first cut at my big, conditional-logic enrollment form and I gotta say, the Logic bit ROCKS. Did exactly what I wanted.

    Looked fine in the Preview, too.

    However, when I put it into the page, the "multiple choice" radio buttons won't align correctly.

    Please see
    http://scubainternships.com/contact/enroll/

    Also, I see from that page I cannot put HTML bold tags in the form field labels, even though I can do so in the description. Too bad. I'll take out the code in a bit.

    Got an idea why the second and subsequent radio buttons in the list lose their alignment?

    Posted 13 years ago on Thursday September 2, 2010 | Permalink

  2. Kevin Flahaut
    Administrator

    Yeah, there's something weird with your theme CSS. I'll take a look and get back to you with some suggestions. It has something to do with the way elements are being floated.

    HTML isn't allowed in the field labels, but you can do that with some simple jQuery added to your page template.

    http://forum.gravityhelp.com/topic/how-to-add-hyperlinks-in-the-form#post-6838

    Posted 13 years ago on Thursday September 2, 2010 | Permalink

  3. Aquanauts
    Member

    Sorry, non programmer here. WHERE would I place that JQuery? And which part? Not the google terms & conditions thing. Would I place the javascript in the form itself where I want the B tags to be?

    Posted 13 years ago on Thursday September 2, 2010 | Permalink

  4. Carl Hancock
    Administrator

    You'd place the jQuery in the theme template file that is used on whatever page your form is being displayed on. Not in the form itself.

    Posted 13 years ago on Thursday September 2, 2010 | Permalink

  5. Kevin Flahaut
    Administrator

    The alignment problems you're seeing are CSS inheritance issues from the theme. There are blanket UL margins and padding values set on lines 66 and 74 of your theme's style.css file.

    You'll need to override those or make them more specific so the forms don't inherit from them. You can see the form looks fine if these are disabled.

    screenshot

    Posted 13 years ago on Friday September 3, 2010 | Permalink

  6. Aquanauts
    Member

    You're awesome Kevin.

    After your first reply I wrote the theme author who game me the "it's not MY code" BS so I cracked open Firebug today and found exactly what you did. Moron set all the lists to 0 margin left.

    I added an !important tag to one line in the Gravity CSS and this fixed it:

    .gform_wrapper .left_label ul.gfield_checkbox, .gform_wrapper .right_label ul.gfield_checkbox, .gform_wrapper .left_label ul.gfield_radio, .gform_wrapper .right_label ul.gfield_radio {
	margin-left:32%!important
}

    Thanks again for your help. I'm off to "call bullshit" on the Complexity theme author's ThemeForest page.

    Posted 13 years ago on Friday September 3, 2010 | Permalink

  7. Kevin Flahaut
    Administrator

    I'm glad you got it working. Yes, a lot of theme authors take the easy way and just apply blanket styles to many elements including list types. It's usually the first thing I look for when I debug this type of formatting issue.

    Posted 13 years ago on Friday September 3, 2010 | Permalink