PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Moving the required field span before the label text

  1. 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 10 years ago on Tuesday December 13, 2011 | Permalink
  2. 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 10 years ago on Tuesday December 20, 2011 | Permalink
  3. 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 10 years ago on Wednesday December 21, 2011 | Permalink

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