Form fields not visible « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

artifaktCom
Member

Hi,
Just testing out the form. On my form, the form field frames are not visible, so the user cant tell where they have to click to enter the field text.
Here is a link: http://www.torontocitysuites.com/waterclub/
Any ideas?
Thanks,

Posted 12 years ago on Friday August 19, 2011 | Permalink
Kevin Flahaut
Administrator
Line 33 of your theme stylesheet turns off the default borders on a bunch of elements..
```
[css]
html, body, ul, ol, li, img, hr, input, dl, dt, dd, form {
    border: medium none;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
```
If you disable that border property, you'll see that the default input borders show up just fine.

screenshot: http://bit.ly/n6oYDb

you'll need to remove that property from the rule, or else redefine the borders on the input elsewhere in your stylesheet.
Posted 12 years ago on Friday August 19, 2011 | Permalink
artifaktCom
Member

That worked great. Thanks Kevin.
Any idea whats up with the submit button? It seems to be all black...

Posted 12 years ago on Friday August 19, 2011 | Permalink
Kevin Flahaut
Administrator
Yep, it's inheriting the background color from line 1294 of your stylesheet.
```
[css]
.black input[type="submit"] {
    background: none repeat scroll 0 0 #252525;
}
```
Posted 12 years ago on Friday August 19, 2011 | Permalink
artifaktCom
Member

Perfect.
Ok. Last question Kevin. I promise!
How do I align the Submit button with the rest of the fields on the form? Right now, it's pushed to the left.

Posted 12 years ago on Friday August 19, 2011 | Permalink
artifaktCom
Member

Actually, I suppose what I want ot do is move the form to the left instead of moving the button to the right.

Posted 12 years ago on Friday August 19, 2011 | Permalink
Carl Hancock
Administrator

The submit button doesn't appear black to me so i'm assuming you've figured it out. The submit button is styled using CSS so i'm assuming you adjusted the styles for the button.

Posted 12 years ago on Friday August 19, 2011 | Permalink
Kevin Flahaut
Administrator
Your form is inheriting left padding from your theme styles that are causing the issue. Try adding this to the end of your theme stylesheet.
```
[css]
#content .gform_wrapper ul {
    padding: 0!important
}
```
Posted 12 years ago on Friday August 19, 2011 | Permalink
artifaktCom
Member

Thanks!

Posted 12 years ago on Friday August 19, 2011 | Permalink
artifaktCom
Member

Dont know much about CSS.

When I have border: medium none; the input border shows in IE, but not in Safari
When I remove it, the input shows fine in Safari, but some other elements display borders in IE.
Any chance you could tell me how to redfine the input borders elsewhere on my stylesheet to avoid this? I need pretty clear instructions :( please

Posted 12 years ago on Friday August 19, 2011 | Permalink
Kevin Flahaut
Administrator
Yep, that's the way it goes. Different browsers render CSS different ways. Herein lies the fun.

Since the border rule includes several other elements besides the inputs, you would have to break that out into a couple of new rules to keep it straight. You can try adding this to the end of your theme stylesheet to redefine the borders for the input types. Once it's there, you can tweak it to suit your preference.
```
[css]
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=url],
.gform_wrapper input[type=number],
.gform_wrapper input[type=password],
.gform_wrapper select,
.gform_wrapper textarea {
	border:1px solid #ccc!important;
}
```
Posted 12 years ago on Friday August 19, 2011 | Permalink
artifaktCom
Member

Ok. Ill play around with that.
Thanks so much for the help Kevin.

Posted 12 years ago on Friday August 19, 2011 | Permalink