Adjusting Contact Info Field Sizes « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

I am working on this form at a temporary spot:
http://www.larabbits.org/test/volunteer/volunteer-application/

I was told by Kevin Flahaut that in order to adjust contact info field sizes (smaller) I would need to "target the field using CSS inheritance based on it's parent containers."

I looked at this page
http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/
but I can't make heads or tails of what I am supposed to do. Since I've already applied the below code into my theme's CSS file, to move the fields further left, is this something I can just add to the below? Sorry - I'm not the best with coding but I do the best I can!

/* gravityforms adjusting contact info area */
body .gform_wrapper .left_label li#field_1_1 .gfield_label,
body .gform_wrapper .right_label li#field_1_1 .gfield_label,
body .gform_wrapper .left_label li#field_1_2 .gfield_label,
body .gform_wrapper .right_label li#field_1_2 .gfield_label,
body .gform_wrapper .left_label li#field_1_3 .gfield_label,
body .gform_wrapper .right_label li#field_1_3 .gfield_label,
body .gform_wrapper .left_label li#field_1_4 .gfield_label,
body .gform_wrapper .right_label li#field_1_4 .gfield_label,
body .gform_wrapper .left_label li#field_1_5 .gfield_label,
body .gform_wrapper .right_label li#field_1_5 .gfield_label,
body .gform_wrapper .left_label li#field_1_6 .gfield_label,
body .gform_wrapper .right_label li#field_1_6 .gfield_label
{width:10%
}

Posted 13 years ago on Sunday January 16, 2011 | Permalink

David Smith
Member

Hi Larabbits, I'm not sure I understand your question? What elements exactly are you trying to make smaller?

Posted 13 years ago on Sunday January 16, 2011 | Permalink
larabbits
Member

Hi, David.

I'm trying to make the text fields smaller...they are too wide across the page and there are no capabilities to adjust this easily as there are for other text boxes.

Posted 13 years ago on Monday January 17, 2011 | Permalink
David Smith
Member

You should be able to adjust the field sizes uses the built in Gravity Form field size option per field: http://grab.by/8pOp

Are you looking for a more specific sizing option?

Posted 13 years ago on Monday January 17, 2011 | Permalink
larabbits
Member

There is no built-in size option per field for the contact info fields (name, email, phone, address)...that's the problem!

Posted 13 years ago on Monday January 17, 2011 | Permalink
Kevin Flahaut
Administrator

These fields don't have individual size options because they're added as a group of fields and have to fit together or have a certain number of characters that are required for validation and need to be a certain size.

If you want to modify the widths on these fields, it will have to be with custom CSS rules added to your theme stylesheet.

Please note that in the advanced field groupings, it may not be as easy as just changing the width on one field. It may necessitate that you change the widths/margins on the adjacent fields too so everything formats correctly.

Posted 13 years ago on Monday January 17, 2011 | Permalink
larabbits
Member

Thank you, Kevin, I do understand this...but what I don't understand is how this is done. I read over the documentation but honestly don't get it.

Posted 13 years ago on Monday January 17, 2011 | Permalink
Kevin Flahaut
Administrator
You need to view the source and get the ID's for each input or containing div element in the case of the advanced field groupings. Once you have that, you can then target the elements to make changes. In my example below, if you study it you'll see that this only applies to form ID 1 (#gform_wrapper_1) and I have targeted specific inputs by ID. For the advanced field groupings, the easiest thing to do is change the width of the containing div element (.ginput_complex) and the inputs inside will resize accordingly since they are defined as percentage widths.

The email and phone field can be targeted directly by their unique input ID and manipulated.

Add this to the end of your theme stylesheet, tweak the width values to whatever you like and you should be good to go.
```
/* name fields - resize the container */
body #gform_wrapper_1 .right_label div#input_1_1.ginput_complex,
body #gform_wrapper_1 .left_label div#input_1_1.ginput_complex {width:40%}

/* email field */
body #gform_wrapper_1 #input_1_2 {width:322px}

/* phone field */
body #gform_wrapper_1 #input_1_3 {width:322px}

/* address fields - resize the container */
body #gform_wrapper_1 .right_label div#input_1_4.ginput_complex,
body #gform_wrapper_1 .left_label div#input_1_4.ginput_complex {width:40%}
```
test screenshot: http://grab.by/8qfL
Posted 13 years ago on Monday January 17, 2011 | Permalink
larabbits
Member

Thank you!!!!!

Posted 13 years ago on Sunday January 23, 2011 | Permalink

This topic has been resolved and has been closed to new replies.