https://legacy.forums.gravityhelp.com/topic/making-fields-taller-without-misaligning-multiple-choice-radio-buttons Gravity Support Forums Topic: Making fields taller without misaligning multiple choice radio buttons? en-US Mon, 20 Apr 2026 23:08:40 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/making-fields-taller-without-misaligning-multiple-choice-radio-buttons#post-23143 Wed, 13 Apr 2011 10:44:03 +0000 Kevin Flahaut 23143@https://legacy.forums.gravityhelp.com/ <p>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..</p> <pre><code>[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; }</code></pre> https://legacy.forums.gravityhelp.com/topic/making-fields-taller-without-misaligning-multiple-choice-radio-buttons#post-23140 Wed, 13 Apr 2011 09:19:54 +0000 scott74 23140@https://legacy.forums.gravityhelp.com/ <p>ps.. i tried this but it expands the boxes way up<br /> body .gform_wrapper .gform_body .gform_fields .gfield input[type=text] {font-size:14px} </p> https://legacy.forums.gravityhelp.com/topic/making-fields-taller-without-misaligning-multiple-choice-radio-buttons#post-23138 Wed, 13 Apr 2011 09:09:28 +0000 scott74 23138@https://legacy.forums.gravityhelp.com/ <p>Hey Kevin thank you.. i found this page to read through</p> <p><a href="http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples" rel="nofollow">http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples</a></p> <p>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</p> <p>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.</p> <p>body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container {border:1px solid red} </p> https://legacy.forums.gravityhelp.com/topic/making-fields-taller-without-misaligning-multiple-choice-radio-buttons#post-23121 Tue, 12 Apr 2011 23:38:58 +0000 Kevin Flahaut 23121@https://legacy.forums.gravityhelp.com/ <p>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.</p> <pre><code>[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; }</code></pre> <p>Here's a good reference page:<br /> <a href="http://www.w3schools.com/html/html_forms.asp" rel="nofollow">http://www.w3schools.com/html/html_forms.asp</a> </p> https://legacy.forums.gravityhelp.com/topic/making-fields-taller-without-misaligning-multiple-choice-radio-buttons#post-23112 Tue, 12 Apr 2011 20:40:43 +0000 scott74 23112@https://legacy.forums.gravityhelp.com/ <p>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...</p> <p>I guess it would be another type equals... but what are they called or is there a list somewhere.. thanks.. </p> https://legacy.forums.gravityhelp.com/topic/making-fields-taller-without-misaligning-multiple-choice-radio-buttons#post-23015 Mon, 11 Apr 2011 17:10:39 +0000 Kevin Flahaut 23015@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>It's better to target the inputs specifically by their types to do what you want. Replace your input rule with this.</p> <pre><code>[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; }</code></pre> <p>screenshot: <a href="http://d.pr/EeWV" rel="nofollow">http://d.pr/EeWV</a> </p> https://legacy.forums.gravityhelp.com/topic/making-fields-taller-without-misaligning-multiple-choice-radio-buttons#post-22974 Mon, 11 Apr 2011 12:53:34 +0000 Carl Hancock 22974@https://legacy.forums.gravityhelp.com/ <p>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. </p> https://legacy.forums.gravityhelp.com/topic/making-fields-taller-without-misaligning-multiple-choice-radio-buttons#post-22967 Mon, 11 Apr 2011 12:02:48 +0000 scott74 22967@https://legacy.forums.gravityhelp.com/ <p>I tried that code but does not seem to affect anything..</p> <p><a href="http://logoicons.s3.amazonaws.com/customcss.jpg" rel="nofollow">http://logoicons.s3.amazonaws.com/customcss.jpg</a> Screen of code </p> <p>form <a href="http://greenprintlawns.com/10point/" rel="nofollow">http://greenprintlawns.com/10point/</a> </p> https://legacy.forums.gravityhelp.com/topic/making-fields-taller-without-misaligning-multiple-choice-radio-buttons#post-22960 Mon, 11 Apr 2011 11:31:31 +0000 Carl Hancock 22960@https://legacy.forums.gravityhelp.com/ <p>This is because your change is only being applied to the radio button itself, and not the text next to it. </p> <p>If you want more space in between radio button items then add this CSS to your themes stylesheet:</p> <p>.gform_wrapper .gfield_radio li {margin-top: 10px; margin-botto: 10px;}</p> <p>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). </p> https://legacy.forums.gravityhelp.com/topic/making-fields-taller-without-misaligning-multiple-choice-radio-buttons#post-22940 Mon, 11 Apr 2011 10:51:09 +0000 scott74 22940@https://legacy.forums.gravityhelp.com/ <p>It is available now<br /> <a href="http://greenprintlawns.com/new-customer/" rel="nofollow">http://greenprintlawns.com/new-customer/</a> radio buttons being pushed down here</p> <p><a href="http://greenprintlawns.com/10point/" rel="nofollow">http://greenprintlawns.com/10point/</a> check boxes being pushed here</p> <p>using this in the css</p> <p>.gform_wrapper input, .gform_wrapper option {<br /> height: 3em;<br /> }</p> <p>Thanks </p>