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.
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%;
}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?
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.
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)
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; }
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;
}
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.
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;
}Well, from there, you can play around with the values and try to figure out how you want it to look. All my best!