https://legacy.forums.gravityhelp.com/topic/styling-side-by-side-input-fields Gravity Support Forums Topic: styling side-by-side input fields en-US Mon, 20 Apr 2026 01:00:22 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/styling-side-by-side-input-fields#post-13163 Mon, 22 Nov 2010 20:45:07 +0000 wraycodesign 13163@https://legacy.forums.gravityhelp.com/ <p>urmedia,</p> <p>You read my rather simple mind! Thank you! Kevin, thanks again for your quick responses.</p> <p>Amanda </p> https://legacy.forums.gravityhelp.com/topic/styling-side-by-side-input-fields#post-13147 Mon, 22 Nov 2010 17:32:33 +0000 urmedia 13147@https://legacy.forums.gravityhelp.com/ <p>Basically it's taking an object oriented approach.</p> <p>GF has default 'parents' and allows easy modifications through it's children.</p> <p>You can redefine a parent class to style your phone field, or write your own rules...it's up to you and your comfort with CSS. One thing does stay the same, however, is the nesting. To access any form field you do need to define the nesting path:</p> <p>.gform_wrapper =&gt; .gform_body =&gt; .gform_fields =&gt; .gfield =&gt; New_Input_Class </p> https://legacy.forums.gravityhelp.com/topic/styling-side-by-side-input-fields#post-13144 Mon, 22 Nov 2010 17:29:22 +0000 Kevin Flahaut 13144@https://legacy.forums.gravityhelp.com/ <p>Sure, if you want to style all the fields the same - everywhere, simply use the class name for the rule. Most people don't want to do that, so the id's are there if you want to limit it. </p> https://legacy.forums.gravityhelp.com/topic/styling-side-by-side-input-fields#post-13139 Mon, 22 Nov 2010 17:25:22 +0000 wraycodesign 13139@https://legacy.forums.gravityhelp.com/ <p>If I'm understanding correctly, from your example above I would need to target each phone field separately. Originally I gave all my phone fields a class of "phone" and would like them all to behave the same way. </p> <p>When you include field numbers doesn't that limit your styling to just that field? </p> <p>Sorry to be a bother... </p> https://legacy.forums.gravityhelp.com/topic/styling-side-by-side-input-fields#post-13128 Mon, 22 Nov 2010 15:53:52 +0000 Kevin Flahaut 13128@https://legacy.forums.gravityhelp.com/ <p>it's about options. I chose to target the inputs in my rule with inheritance from the parent. If you prefer, you can get the id of the input itself and target it specifically by that. </p> https://legacy.forums.gravityhelp.com/topic/styling-side-by-side-input-fields#post-13124 Mon, 22 Nov 2010 14:24:26 +0000 wraycodesign 13124@https://legacy.forums.gravityhelp.com/ <p>Thanks Kevin. Just curious, though, why bother naming a class on the input? </p> https://legacy.forums.gravityhelp.com/topic/styling-side-by-side-input-fields#post-13102 Mon, 22 Nov 2010 10:54:24 +0000 Kevin Flahaut 13102@https://legacy.forums.gravityhelp.com/ <p>You have to reset the widths on the actual inputs.</p> <p><code>body .gform_wrapper li#field_1_3 input, body .gform_wrapper li#field_1_15 input {width:92%!important}</code></p> <p><a href="http://grab.by/grabs/09b95ef7b0b71ac0a7677c212535b081.png" rel="nofollow">screenshot</a> </p> https://legacy.forums.gravityhelp.com/topic/styling-side-by-side-input-fields#post-13092 Mon, 22 Nov 2010 05:30:07 +0000 wraycodesign 13092@https://legacy.forums.gravityhelp.com/ <p>I've checked other posts but can't seem to find this. You've likely covered this already. I'm adding a custom class name to make it easier to style the smaller input fields side by side, but when designate a width it's giving me lots of extra space in between the fields. I've separated out the styling with the class name by itself and with "input" added but still it's not behaving as expected. </p> <p>I'm trying to get "phone" and "alternate phone" closer together but can't seem to.</p> <p><a href="http://www.coachstrobl.com/scoringfactory/clinics/clinic-sign-up" rel="nofollow">http://www.coachstrobl.com/scoringfactory/clinics/clinic-sign-up</a></p> <p>Thanks for any help. </p>