jeffhiggins
Member
I'm having an issue with the "address" form field's right side edge being cut off. This seems to happen no matter how big the page is.
Example: http://jeffhiggins.ca/procare/contact/
I've tried messing with the padding settings in my CSS but to no avail. Any ideas? Thanks!
Try dropping this into your theme's CSS:
[css]
.gform_wrapper .ginput_complex .ginput_full input {
width: 92% !important;
}
.gform_wrapper .ginput_complex .ginput_right input, .gform_wrapper .ginput_complex .ginput_right select, .gform_wrapper .field_name_first input, .gform_wrapper .ginput_complex .ginput_left input {
width: 84% !important;
}Also, I deactivated/removed the min-width/max-width on this selector as well:
[css]
input[type="text"], input[type="password"], input[type="email"], textarea, select {
border: 1px solid #CCC;
padding: 0px 0px;
outline: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #777;
margin: 0;
min-width: 190px;
max-width: 100%;
display: block;
margin-bottom: 0px;
background: white;
}
jeffhiggins
Member
Thanks for the super-fast reply Rob. I tried dropping your code snippet and change in, but it didn't seem to work. Then I I tried commenting out the entire "form" section in my CSS (which I'm not a big fan of anyway), and left your new code snippet, and it did work. But then my form fields became comically large. I've left it with my form CSS commented out, but can you tell me how to make the fields appear smaller?
Thanks again!
No problem, this padding here in your stylesheet is causing the comically large inputs (LOL - like the descriptor on that one):
[css]
input {
padding: 10px !important;
font-size: 11px !important;
}No that exists already in your stylesheet. The 10px padding is the cause. That's not a fix. I was just pointing it out.
If you want to keep that you'll need to target GF's inputs to override it, for example:
[css]
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=number],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=password],
body .gform_wrapper .gform_body .gform_fields .gfield select {
padding:5px 0;
}You can then change the padding to how you see fit.
jeffhiggins
Member
Whoops, sorry! Got it working. I tried the override code first, but that didn't seem to work. I eventually tracked down the input padding code (this theme has like 10 different spaghetti CSS files) and was able to get the fields down to a sensible size.
Thanks a ton Rob! Gravity Forms is worth every penny.
Right on man, glad to help out!