address label positioning « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

bgoheen
Member

I've searched the forums but am still confused on how to change the positioning for the address labels (street address, city, state, zip code). I'd actually prefer to have the labels ABOVE the input field, but realize this might not be possible.

Currently there is too much space between the input field and the label so it looks confusing:
http://mnhome.org/learn/what-to-do-when-selling-a-house/property-market-value/

Also, it seems to me like the zip code field (and label) should be positioned in the left column.

Posted 13 years ago on Wednesday June 15, 2011 | Permalink
Kevin Flahaut
Administrator

There isn't an option to change the position of the sub-labels in the address field. You would have do some customization using CSS, jQuery or a combination of those to change the position.

http://www.gravityhelp.com/forums/topic/adjustment-of-lables#post-26170

The extra spacing between the inputs and sub-labels is coming from your theme CSS. Line 108 of the pk_style.css file sets a 10px bottom margin on all text, email and password inputs. That's causing your spacing issue. The extra margin is also causing the zip code alignment problem in this instance.. the field is "hanging" on the city field being pushed to the right. If you disable that rule, you'll see that the spacing and field alignment looks correct.

screenshot: http://grab.by/amp4

You'll need to override that rule with some more specific CSS or else remove the bottom margin property from the rule in the existing stylesheet.

http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

Posted 13 years ago on Wednesday June 15, 2011 | Permalink
Emiel
Member

I have the same problem, I want to have the labels above the fiels instead of below. For instance within the name field, I want to have "First" and "Last" above the input boxes. I have tried to move the label field manually, but this will give problems with the required fields. Any idea how I can fix this? The form I'm working on can be found on:
http://stendenrangsit.com/application-form/
Looking forward to hear from you!

Posted 13 years ago on Thursday June 16, 2011 | Permalink
Kevin Flahaut
Administrator

Emiel,

Since there's currently no option/setting to change the sub-label position, it's all going to be a manual process if you want to change it - that includes the validation styles. I'm not sure what problem you're referring to exactly, but there's no quick "fix", if you want to change the default form layout, then you'll have to adjust the validation styling and other related elements as well.

If you're not really proficient with CSS, you might want to consider contracting another developer to help. Here's a good resource if you need someone.

http://wpcandy.com/pros/experienced/with-gravity-forms

Posted 13 years ago on Thursday June 16, 2011 | Permalink
knunley80
Member

I am having the same problem with the address field. My form worked fine until about 6/6/11 when the number of people completing it dropped off. They think there isn't a box to enter the zip code. I haven't changed anything on my style sheet. I can't seem to pinpoint where the extra margin is. http://www.visitvirginiamountains.com/travel-guides/

Posted 13 years ago on Friday June 17, 2011 | Permalink
Kevin Flahaut
Administrator
@knunley80,

Your theme is setting a 24px bottom margin on all inputs and that's your problem. See line 713 of your style.css file.

You can override that by placing this at the end of your themes style.css file.
```
[css]
.entry-content .gform_wrapper input {
    margin-bottom:0;
}
```
screenshot: http://grab.by/anq9
Posted 13 years ago on Friday June 17, 2011 | Permalink
knunley80
Member

That fixed it. Thank you very much!

Posted 13 years ago on Friday June 17, 2011 | Permalink
snomo
Member
Hi,

U had the same problem here and your suggestion of:
```
[css].entry-content .gform_wrapper input {
 margin-bottom:0;
}
```
fixed all address fields except the country dropdown menu which still shows the label about 30px below the drop down.

Any ideas?
Posted 13 years ago on Monday October 17, 2011 | Permalink
Kevin Flahaut
Administrator
@snomo,

Without seeing your form, I can't say for sure but it sounds like you need to add a rule for the select element as well as the input.
```
[css]
.entry-content .gform_wrapper input,
.entry-content .gform_wrapper select {
    margin-bottom:0;
}
```
If you can share a URL to your form, I can see what you see and can probably offer a better solution than just a guess.
Posted 13 years ago on Monday October 17, 2011 | Permalink
snomo
Member

Thanks. That did it!

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

Wonderful. Thanks for the update..

Posted 13 years ago on Tuesday October 18, 2011 | Permalink

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