PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Making fields taller without misaligning multiple choice radio buttons?

  1. 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.

    see here http://greenprintlawns.com/new-customer/

    Posted 9 years ago on Sunday April 10, 2011 | Permalink
  2. 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.

    Posted 8 years ago on Monday April 11, 2011 | Permalink
  3. 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

    Posted 8 years ago on Monday April 11, 2011 | Permalink
  4. 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).

    Posted 8 years ago on Monday April 11, 2011 | Permalink
  5. I tried that code but does not seem to affect anything..

    http://logoicons.s3.amazonaws.com/customcss.jpg Screen of code

    form http://greenprintlawns.com/10point/

    Posted 8 years ago on Monday April 11, 2011 | Permalink
  6. 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.

    Posted 8 years ago on Monday April 11, 2011 | Permalink
  7. 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

    Posted 8 years ago on Monday April 11, 2011 | Permalink
  8. 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..

    Posted 8 years ago on Wednesday April 13, 2011 | Permalink
  9. 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

    Posted 8 years ago on Wednesday April 13, 2011 | Permalink
  10. 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}

    Posted 8 years ago on Wednesday April 13, 2011 | Permalink
  11. ps.. i tried this but it expands the boxes way up
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=text] {font-size:14px}

    Posted 8 years ago on Wednesday April 13, 2011 | Permalink
  12. 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;
    }
    Posted 8 years ago on Wednesday April 13, 2011 | Permalink