Change address field and name labels « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

NVG_support
Member

I'm trying to change the amount of space between the input box and the label underneath.

If you look at the form on this page: http://www.newvideo.com/apple/ the work First is a little too far away from the box. And it because especially confusing in the address field where the 'address 2' label is close to two of the input fields.

Thanks!

Posted 14 years ago on Thursday February 3, 2011 | Permalink
Kevin Flahaut
Administrator

I'm not seeing your problem. I checked in several browsers. What browser are you seeing this issue in?

If you want to tweak your sub-label positioning, you can easily target them to apply new properties with CSS. Here's a guide to show you how to target the specific elements in the advanced field groupings. You'll see examples for sub-labels there as well.

http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/#advanced

Posted 14 years ago on Thursday February 3, 2011 | Permalink
NVG_support
Member

Here is an example:

http://www.newvideo.com/wp-content/uploads/2011/02/example.jpg

I know it's super nit-picky but i'd like to get rid of the space that is highlighted in orange.

Posted 14 years ago on Thursday February 3, 2011 | Permalink

You can add this to your theme stylesheet and tweak it to your preference. It will target all of the sub-labels in the advanced fields.

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex label,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour label,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_minute label,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month label,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day label,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year label,
body .gform_wrapper .gform_body .gform_fields .gfield .instruction {margin:0 0 3px 0}

Posted 14 years ago on Thursday February 3, 2011 | Permalink

placson
Member

Hi Kevin,

I tried adding that to the end of my style.css and it didn't work. Here's my URL

http://www.warriorsquest.net/tournament/registration/

I'd also like to decrease the gap between label and field. (I"m on Chrome and Firefox on Linux)

Posted 13 years ago on Friday May 20, 2011 | Permalink

Kevin Flahaut
Administrator

I don't see it at the end of your style.css file. When it's added it works just fine in my tests.

I copied your page markup and added the styles inline here.. I adjusted the line height as well.

[css]
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex label,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour label,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_minute label,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month label,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day label,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year label,
body .gform_wrapper .gform_body .gform_fields .gfield .instruction {
	margin:0 0 2px 0;
	line-height: 1
}

You should be able to add that to the end of your style.css file and see the changes.

Posted 13 years ago on Friday May 20, 2011 | Permalink

placson
Member

You rock Kevin. Thanks!

Posted 13 years ago on Friday May 20, 2011 | Permalink
Kevin Flahaut
Administrator

My pleasure. Glad that helped you out.

Posted 13 years ago on Friday May 20, 2011 | Permalink

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