Gravity Forms - Field Sizing - Support | Kriesi.at

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts

May 21, 2013 at 9:39 pm #23468

rcgroup

Participant

Hi I’m using Gravity Forms

http://rcgauto.wpengine.com/shipping/car-shipping-quote/ (hosted on WPengine)

Can you give a suggestion how to make fields smaller for better allignment.

Right now the “Small” and “Medium” are the same size, I believe there is something in the theme that governs minimum field width.

Thanks

May 22, 2013 at 1:40 am #119934

Ismael

Moderator

Hi,

Add this on your custom.css to control the field width.

#top input[type="text"] {

width: 150px;

}

Max width is 210px.

Regards,

Ismael

May 22, 2013 at 3:35 pm #119935

rcgroup

Participant

That doesn’t quite solve the problem, I want to be able to regulate the width of the fields.

Gravity Forms allows you to select small or medium

Right now I can’t

May 23, 2013 at 5:02 am #119936

Ismael

Moderator

Hi,

You can find all of the theme’s form style on css > base.css

/* #Forms

================================================== */



#top form {

margin-bottom: 20px; }

#top fieldset {

margin-bottom: 20px; }

#top .input-text,

#top input[type="text"],

#top input[type="input"],

#top input[type="password"],

#top input[type="email"],

#top input[type="number"],

#top input[type="url"],

#top input[type="tel"],

#top input[type="search"],

#top textarea,

#top select {

-webkit-appearance: none;

border: 1px solid #e1e1e1;

padding: 8px 6px;

outline: none;

font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

color: #777;

margin: 0;

width: 210px;

max-width: 100%;

display: block;

margin-bottom: 20px;

background: #fff;

-webkit-font-smoothing: antialiased;

border-radius: 0px;

}



#top input[type="text"]:focus,

#top input[type="password"]:focus,

#top input[type="email"]:focus,

#top input[type="number"]:focus,

#top input[type="url"]:focus,

#top input[type="tel"]:focus,

#top input[type="search"]:focus,

#top textarea:focus {

box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);

color: #555;

}

#top textarea {

min-height: 60px; line-height:1.5em;}

#top label{

display: block;

font-weight: bold;

font-size: 12px;  }

#top legend {

display: block;

font-weight: normal;

font-size: 15px;  }

#top select {

width: 220px; }

#top input[type="checkbox"] {

display: inline; }

#top label span,

#top legend span {

font-weight: normal;

font-size: 13px;

color: #444; }



#top textarea{width:100%;}



#top #wrap_all .valid .text_input, #top #wrap_all .valid .text_area{border:1px solid #9AA600;} /*#70A41B*/

#top #wrap_all .error .text_input, #top #wrap_all .error .text_area{border:1px solid #DF653E;}

#top #wrap_all .ajax_alert .text_input, #top #wrap_all .ajax_alert .text_area{border:1px solid #ffb628;}

I think this part of the style is the one preventing you from defining input width

#top .input-text,

#top input[type="text"],

#top input[type="input"],

#top input[type="password"],

#top input[type="email"],

#top input[type="number"],

#top input[type="url"],

#top input[type="tel"],

#top input[type="search"],

#top textarea,

#top select {

-webkit-appearance: none;

border: 1px solid #e1e1e1;

padding: 8px 6px;

outline: none;

font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

color: #777;

margin: 0;

width: 210px;

max-width: 100%;

display: block;

margin-bottom: 20px;

background: #fff;

-webkit-font-smoothing: antialiased;

border-radius: 0px;

}