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.

Spacing in checkboxes Nando theme

Gravity Support Forums » Plugin Support » Gravity Forms

  1. tcham
    Member

    Dear Support,

    Firstly, the form I am trying to edit can be seen here:

    http://tcdigispace.com/sample2/services/website-development-maintenance/web-assessment/

    As you will see, the first option in the checkbox fields are all misaligned. There is also too much space between the checkbox and the text that corresponds with it. I looked at other topics about styling the forms, but am unable to tell how to prevent the checkboxes from showing up in such a misaligned fashion with my theme (Nando). Please help asap. Thanks!

    Posted 14 years ago on Tuesday March 9, 2010 | Permalink

  2. Kevin Flahaut
    Administrator

    The styling issue is related to your theme, not Gravity Forms.

    There is a width declaration on line 90 of your _content.css file that sets all inputs to 250px wide. Checkboxes are inputs so the sloppy theme CSS is causing your display issue.

    Your labels are also floated left when they don't need to be and this is causing other display issues with the content wrapping incorrectly.

    You can try adding this to the very bottom of your style sheet and it should override the declarations.

    .gform_wrapper input {width:auto!important}
.gform_wrapper label {float:none!important}
    Posted 14 years ago on Tuesday March 9, 2010 | Permalink

  3. tcham
    Member

    Thank you SO much for your prompt response. This worked!

    However, after I did this, the large text box fields within my form became much smaller. Is there a line I can add to make these just as wide as the paragraph boxes again? Thanks again.

    Posted 14 years ago on Tuesday March 9, 2010 | Permalink

  4. Kevin Flahaut
    Administrator

    Sure, you can re-declare this value.. just put this below the others in your stye sheet.

    .gform_wrapper .top_label input.large, .gform_wrapper .top_label select.large, .gform_wrapper .top_label textarea.textarea {
width:92%;
}

    Here's a screenshot of my quick test.

    Posted 14 years ago on Tuesday March 9, 2010 | Permalink

  5. tcham
    Member

    Ok, so I have added the following to my stylesheet, but the 'large' single line text areas are still small. Am I missing something? Thanks.

    .gform_wrapper input {width:auto!important}
.gform_wrapper label {float:none!important}
.gform_wrapper .top_label input.large, .gform_wrapper .top_label select.large, .gform_wrapper .top_label textarea.textarea {
width:92%;
}
    Posted 14 years ago on Tuesday March 9, 2010 | Permalink

  6. Kevin Flahaut
    Administrator

    Looks like the last value is still being overridden somewhere. Try adding the !important to the width value.

    .gform_wrapper input {width:auto!important}
.gform_wrapper label {float:none!important}
.gform_wrapper .top_label input.large, .gform_wrapper .top_label select.large, .gform_wrapper .top_label textarea.textarea {width:92%!important;}
    Posted 14 years ago on Tuesday March 9, 2010 | Permalink

  7. tcham
    Member

    Perfect. That worked. THANK YOU Kevin!!!! Great support!

    Posted 14 years ago on Tuesday March 9, 2010 | Permalink

  8. Kevin Flahaut
    Administrator

    My pleasure. We're always here if you need anything else.

    Posted 14 years ago on Tuesday March 9, 2010 | Permalink

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