I found the thread on making the fields taller but it is closed to discussion so posting here. I added this code
.gform_wrapper input, .gform_wrapper option {
height: 3em;
}
and it worked but for the multiple choice radio button, they get out of align.. Does anyone know how to fix this? I would like to use the 3em for the height of the fields and keep the multiple choice radio selections in alignment.
The page you link to is currently inaccessible, if you can make it accessible we can take a look and provide some assistance with the CSS.
It is available now
http://greenprintlawns.com/new-customer/ radio buttons being pushed down here
http://greenprintlawns.com/10point/ check boxes being pushed here
using this in the css
.gform_wrapper input, .gform_wrapper option {
height: 3em;
}
Thanks
This is because your change is only being applied to the radio button itself, and not the text next to it.
If you want more space in between radio button items then add this CSS to your themes stylesheet:
.gform_wrapper .gfield_radio li {margin-top: 10px; margin-botto: 10px;}
You may need to adjust your existing CSS so it doesn't add that EM to the input element globally. It's never recommended to add CSS to inputs globally like that as there are a lot of fields that are actually INPUT fields you may not want to style that way (submit buttons are inputs too).
I tried that code but does not seem to affect anything..
http://logoicons.s3.amazonaws.com/customcss.jpg Screen of code
I see the margin being applied, the problem is you have to remove the 3em you are also setting. That is what is causing the display issue with the checkbox. The 3em is being applied to the checkbox input but not the label. Your CSS has to be written so it applies to all the elements, checkboxes consist of an LI a CHECKBOX INPUT and a LABEL so you have to apply your CSS accordingly.
You're going about this the wrong way. You're applying blanket rules to the input tag and there are different types of inputs such as radio/checkbox inputs that will inherit the same properties.
It's better to target the inputs specifically by their types to do what you want. Replace your input rule with this.
[css]
/* target specific input types for the new height property */
body .gform_wrapper input[type=text],
body .gform_wrapper input[type=tel],
body .gform_wrapper input[type=url],
body .gform_wrapper input[type=password],
body .gform_wrapper input[type=number],
body .gform_wrapper input[type=file] {
height:3em
}
/* add spacing between lists by padding the containing list item */
body .gform_wrapper ul.gfield_radio li {
padding-bottom: 10px!important;
}screenshot: http://d.pr/EeWV
Hey Great , thanks kevin... is there a way to increase the drop down menu fields also to match the 3em of the email, name ect.. fields...
I guess it would be another type equals... but what are they called or is there a list somewhere.. thanks..
Sure. Drop down fields are "selects" in CSS. You would add that to the list of elements that get the 3em height rule. Revised CSS is below.
[css]
/* target specific input types for the new height property */
body .gform_wrapper input[type=text],
body .gform_wrapper input[type=tel],
body .gform_wrapper input[type=url],
body .gform_wrapper input[type=password],
body .gform_wrapper input[type=number],
body .gform_wrapper input[type=file],
body .gform_wrapper select {
height:3em
}
/* add spacing between lists by padding the containing list item */
body .gform_wrapper ul.gfield_radio li {
padding-bottom: 10px!important;
}Here's a good reference page:
http://www.w3schools.com/html/html_forms.asp
Hey Kevin thank you.. i found this page to read through
http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples
I am trying to make the text that get put in the 3em fields appear bigger also not.. as its pretty small since i increased the fields
Would that be the input field text or something... i tried this code of course it targeted the outer field with a red border but just trying to make the text that gets inputed bigger now.
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container {border:1px solid red}
You're setting the field size relative to the font size so if you up the font size, the field size should get larger along with it. You can use a pixel value for the height rather than the em value if you want the height to be independent of the font size. Something like this instead..
[css]
body .gform_wrapper input[type=text],
body .gform_wrapper input[type=tel],
body .gform_wrapper input[type=url],
body .gform_wrapper input[type=password],
body .gform_wrapper input[type=number],
body .gform_wrapper input[type=file],
body .gform_wrapper select {
height:30px;
font-size:14px;
}