Moving the required field span before the label text

Gravity Support Forums » Plugin Support » Gravity Forms

Lea Cohen
Member

Our design is such that the asterisk should be before the text. I tried to float the span left, but that takes it too far left. Is there a way to affect the HTML of the form?

Posted 12 years ago on Tuesday December 13, 2011 | Permalink
Jay
Member
Yet another reason asterisks should be added via html or form name and not embedded into the source code. LIM. In the meantime, something like this should work.
```
[css]
.gfield label {
text-indent: 1em;
position: relative; /* important */
}
.gfield_required {
float: left;
}
```
- or -
```
[css]
.gfield label {
padding-left: 1em;
position: relative; /* important */
}
.gfield_required {
position: absolute;
top: 0;
left: 0;
}
```
either will work. If you have gf default css enabled, you might have to add !important.
Posted 12 years ago on Tuesday December 20, 2011 | Permalink
Lea Cohen
Member

Thank you, Jay.
Actually, we decided not to go through with moving the required field, but since you answered, I tried your solutions, but they don't solve my problem.

My problem arises from the fact that I have given the labels a fixed width, so that all the input fields will begin at the same posuition. Then I alligned the text to the right, as that was the design. Therefore each label's text begins in a different place, and floating or absolutely positioning the "required" span puts them to the left of the width of the label, and that's not good for me.
Here is a screenshot of what I need to acheive, and this is a screen shot of what I can acheive using float or position:absolute.

You don't have to keep on looking for a solution for this, as as I said before, the design changed and left the asterisk to the right of the field. I'm just gave this description in order to show that there is a case in which CSS alone can't help (or would be very tedious - if I give each specific required span a different left value), and controlling the HTML would be very helpful

Posted 12 years ago on Wednesday December 21, 2011 | Permalink

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