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.

gap between checkboxes and choice

  1. Hello. I've tried doing this several ways but can't figure out how to fix it.

    There is a gap between the checkbox and the text choice to be made. I tried using "checkboxes" and "multiple choice" - same thing with both. I'd rather use one of these options than a dropdown.

    I'm probably missing something quite obvious. If so, I apologize. Any assistance would be appreciated. Here is a link to the form I'm working on so you can see the gap I'm talking about. It occurs several times on the page.

    http://www.leadingresults.com/experiments/

    Posted 8 years ago on Tuesday November 6, 2012 | Permalink
  2. David Peralty

    Looks like there is a width effecting those options in your CSS.

    Either change or override:

    [css]
    .format_text input, #commentform input, #commentform textarea {
    width: 45%;
    }
    Posted 8 years ago on Tuesday November 6, 2012 | Permalink
  3. Hi David,

    thanks for the quick reply. I added the info you suggested to my stylesheet but it didn't seem to have any effect.

    I'm not sure if the width is what pushes the boxes over from the left or if that is what is pushing the text over from the boxes or both.

    What did I miss?

    Posted 8 years ago on Wednesday November 7, 2012 | Permalink
  4. David Peralty

    I didn't tell you what to change it to, but instead asked you to change it or override it. Try changing the width to 15% and see if that's more to your liking.

    Posted 8 years ago on Wednesday November 7, 2012 | Permalink
  5. Sorry, I misunderstood. Won't changing that also change other "input" items outside of gravity forms?

    I can see if I turn off the width, then it looks okay on that page. Is there a way to target only the gravity form input?

    something like this:
    .gfield_checkbox { width: 125px; } (although this didn't work)

    Posted 8 years ago on Wednesday November 7, 2012 | Permalink
  6. David Peralty

    You can try adding an !important declaration to your rule to see if it works, but as far as I know, it won't override the previous rules added by your theme the way you are hoping/expecting.

    So try:
    .gfield_checkbox { width: 125px !important; }

    Posted 8 years ago on Wednesday November 7, 2012 | Permalink
  7. I turned "off" the width in Firebug in the code you mentioned above and that seemed to do the trick. When I actually add the code to the stylesheet though, there is no change.

    .format_text input, #commentform input, #commentform textarea {
    width: 0px;
    }

    Posted 8 years ago on Wednesday November 7, 2012 | Permalink
  8. I tried adding the code with the important in it....same thing - no change. Something must still be getting in the way.

    Posted 8 years ago on Wednesday November 7, 2012 | Permalink
  9. David Peralty

    I still see:

    .format_text input, #commentform input, #commentform textarea {
    width: 45%;

    in your layout.css. (line 243)

    And when I disable it in Inspect in Chrome, things look as I would expect.

    Posted 8 years ago on Wednesday November 7, 2012 | Permalink
  10. I was working on the stylesheet.css and not looking at the layout.css

    Do I make the changes there the same way?

    Posted 8 years ago on Wednesday November 7, 2012 | Permalink
  11. David Peralty

    I am not going to tell you what you need to change in your theme because each theme is different, and I don't want to have you mess things up. I'm just telling you the source of the issue is how your theme handles things.

    If you use a !important declaration in your style.css it "should" override what layout.css is doing.

    Try adding the following to your style.css:

    .format_text input, #commentform input, #commentform textarea {
    width: 0px !important;
    }
    Posted 8 years ago on Wednesday November 7, 2012 | Permalink
  12. Thanks David; that worked. It didn't totally fix it but it doesn't look so odd now.

    I appreciate the assist!

    Posted 8 years ago on Wednesday November 7, 2012 | Permalink
  13. David Peralty

    Well, from there, you can play around with the values and try to figure out how you want it to look. All my best!

    Posted 8 years ago on Wednesday November 7, 2012 | Permalink