Styling the Address Block « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

chucktho
Member

I'm trying to style the Address Block on my form and having no success at all. Below is what I'm using. I've tried with both px and % using the same code I'm using for styling other parts of the same form. Your help is greatly appreciated.

The form is here: http://tbfaa.devsite103.com/tbfaa/join-tbfaa/

My CSS:

/* Mailing Address1 */
body.custom #field_10_3_1 {
width: 50%;
float: left;
}
#input_10_3_1 {
width: 90%;
}
/* Mailing Address2 */
body.custom #field_10_3_2 {
width: 50%;
float: left;
}
#input_10_3_2 {
width: 90%;
}
/* Mailing City */
body.custom #field_10_3_3 {
width: 60%;
float: left;
}
#input_10_3_3 {
width: 90%;
}
/* Mailing State */
body.custom #field_10_3_4 {
width: 20%;
float: left;
}
#input_10_3_4 {
width: 90%;
}
/* Mailing Zip */
body.custom #field_10_3_5 {
width: 20%;
float: left;
}
#input_10_3_5{
width: 90%;
}

Posted 13 years ago on Thursday December 30, 2010 | Permalink

Carl Hancock
Administrator

Can you describe what you are trying to accomplish as far as styling goes? Looking at the CSS itself isn't as helpful as an explanation so we know what your goal is.

Posted 13 years ago on Thursday December 30, 2010 | Permalink
Kevin Flahaut
Administrator

The problem with your rules is that the ID's you've specified don't exist.

For example, there is no "field_10_3_1" in your markup, there is however a "field_10_3". If you target the ID's correctly, the rules should work.

test screenshot: http://grab.by/88lf

Posted 13 years ago on Thursday December 30, 2010 | Permalink
chucktho
Member

I'm trying to get both Address fields on one line and City, State, Zip on another.

This is what appears for IDs in Fields for Form ID 10 when I access IDs from the Edit Forms panel. Am I misunderstanding something?

Street Address 3.1
Address Line 2 3.2
City 3.3
State / Province 3.4
Zip / Postal Code 3.5
Country 3.6

Posted 13 years ago on Thursday December 30, 2010 | Permalink
chucktho
Member

I just tried replacing the underscore with a dot to no effect. For example, I went from "#field_10_3_4" to "#field_10_3.4"

Posted 13 years ago on Thursday December 30, 2010 | Permalink
Kevin Flahaut
Administrator

You need to view the page source to get the ID's. You can do this by right-clicking in the page somewhere and choosing "view source"or "view page source" from the contextual menu.

If you view the source and search for "#field_10_3.4" you'll see that doesn't exist either. The actual field name is "field_10_3".

screenshot: http://grab.by/88oi

Posted 13 years ago on Thursday December 30, 2010 | Permalink
chucktho
Member

I don't know enough about this stuff. How will I move the fields around if they're all the same? i.e. if 10_3_4 is actually 10_3, what is 10_3_3 or 10_3_2?

Posted 13 years ago on Thursday December 30, 2010 | Permalink
Carl Hancock
Administrator

Yes there are id's that contain 3 level deep numbers like 10_3_2 however the sub elements of the Address field don't have an id that begins with "field". So what Kevin was saying is the field name is field_10_3 and that encompasses ALL of the address field.

The individual elements of the Address field have different ids. For instance the spans that contain each element have an id that looks like this:

input_10_3_1_container

Which you would target with CSS like this:

#input_10_3_1_container {my-css: goeshere;}

Kevin is going to work up some CSS for you that you can use to accomplish what you want to do. Doing what you want to do requires knowledge of how to float CSS elements and how elements relate to each other via id's and classes and containers.

He will post an update once he has the CSS completed.

Posted 13 years ago on Thursday December 30, 2010 | Permalink
Kevin Flahaut
Administrator
@chucktho - Here's some CSS rules that are targeted for that specific form. If I understand correctly, this is how you were trying to format it. You can remove whatever CSS you had implemented before, then append these to the end of the theme stylesheet and you should be good to go.
```
body #gform_wrapper_10 #input_10_3_1_container {width:48%!important; float:left}
body #gform_wrapper_10 #input_10_3_2_container {width:48%!important;}
body #gform_wrapper_10 #input_10_3_3_container,
body #gform_wrapper_10 #input_10_3_4_container {width:32%!important; float:left}
body #gform_wrapper_10 #input_10_3_5_container {width:31%!important;}
```
test screenshot: http://grab.by/88rc

You'll note that as Carl mentioned previously, each input is wrapped in a container with a unique ID. If you simply target those correctly, you can manipulate everything to suit your needs.

If you want to become more familiar with the basic form layout and ID/Class structure. You can reference the visual guide via the link below.

http://www.gravityhelp.com/documentation/visual-css-guide/
Posted 13 years ago on Thursday December 30, 2010 | Permalink
chucktho
Member

Thank you. That did it.

Posted 13 years ago on Friday December 31, 2010 | Permalink

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