How to place required indicator asteriks to the left of labels

Gravity Support Forums » Plugin Support » Gravity Forms

sridhar
Member

URL of the form: http://www.thegolfclubatfallbrook.com/contact-us/

Client likes to have the asteriks to the left of labels like this.

Please advise.

Posted 12 years ago on Wednesday June 1, 2011 | Permalink
David Smith
Member
Not exactly per your screenshot, but you can float the astericks left to get this: http://grab.by/agfu
```
[css]
.page-id-29 .gform_wrapper .gfield_required {
  float: left;
}
```
Posted 12 years ago on Wednesday June 1, 2011 | Permalink
ElkSpring
Member

The Asteriks (asterix) on our form are appearing below the question:

Name
*

Have you seen this happen before? Our site is not live yet - what is the best way to show you this?

Posted 11 years ago on Wednesday April 3, 2013 | Permalink
Kevin Flahaut
Administrator

Without seeing your form and inspecting the CSS, there's no way to know for sure. My guess is that the span element that contains the asterisk is inheriting a "display: block" CSS rule somewhere and that's forcing the asterisk to show in a "new line" if you will.

Whenever you get a publicly accessible URL for your form, you can share that if you're still having problems and somebody will be able to tell you for sure.

Posted 11 years ago on Wednesday April 3, 2013 | Permalink
ElkSpring
Member

I am going to make the site live until tomorrow at 1:00 If you can take a look at this link. I am working with a graphic designer and we both do not have extensive knowledge of CSS so the more explicit you could be would be very helpful - http://elkspring.net/contactabout/

Thanks!

Posted 11 years ago on Thursday April 4, 2013 | Permalink
Chris Hajer
Key Master

Sorry, we were not able to check this out over the weekend. Without seeing the site live, we can't help you with the CSS to resolve your issue.

Posted 11 years ago on Monday April 8, 2013 | Permalink
ElkSpring
Member

Hello - our site is live and we created custom sidebars which I think are causing our issue. Do you have any suggestions for this? - Thanks

http://elkspring.net/classes/

My designer wanted me to note that our sidebars are made up of two types of code:
1. HTML and graphics (text menu with social buttons)
2. WordPress Shortcode (image slider)

Posted 11 years ago on Thursday April 18, 2013 | Permalink
ElkSpring
Member

Hey just checking in about the above request - it seems that the way our sidebars have been created it is causing the * for required questions to bump to the next line which is not very appealing. My developer is not sure what is causing this issue. Thanks

Posted 10 years ago on Wednesday May 15, 2013 | Permalink
Kevin Flahaut
Administrator
@ElkSpring

Hmm. This shouldn't be that difficult to sort out for a "developer".. the browser inspector tools make it pretty easy for developers to isolate markup and view the CSS properties being applied.

Line 2572 of your theme's style.css file sets a float and 100% width property on every span inside the "content-text" container. Inheritance from that property/rule is causing your issue. When I disable that, you can see that the layout is corrected and displays as intended.

screenshot: http://i.imgur.com/d9GZ8iY.jpg

Your developer can craft a new, more specific CSS rule to override that one. Something like this should get you started.
```
[css]
body .content .wrapper .contact-text d.gform_wrapper form .gform_body .gform_fields .gfield label.gfield_label span.gfield_required {
	float: none !important;
	width: 10px;
}
```
Best of luck with it.
Posted 10 years ago on Thursday May 16, 2013 | Permalink