Is there a way to make sure required field asterisk is next to the label and does not fall under it?

  • Profile Image
    Duncan Dexter
    Asked on April 27, 2015 at 03:39 PM
    also is there a way to make all the red asterisks stay next to there subject as you can see some fall underneath
  • Profile Image
    Ben
    Answered on April 27, 2015 at 03:55 PM

    I am looking at your jotform: http://form.jotform.us/form/50846634763160 Duncan and I see what you mean.

    There are few ways to do it with CSS.

    The easiest and quickest ones are with code such as:

    span.form-required {
        float: right;
    }

    and

    span.form-required {
        float: left;
    }

    The first code will show the asterisk right next to the field on the right of the label and be moved away from the label itself in some fields quite a lot.

    The second one will show the label right next to the asterisk, but the asterisk will be on the far left of the label (not on the right as it is now).

    This would be the best way to accomplish what you are after by my opinion, but there is another option and that is to use this code:

    label.form-label {
        width: 200px !important;
    }

    Basically we must make the width of the label bigger than original 150px in order to allow the required mark to be in the same row with the rest of the characters, otherwise it would not fall in properly.

    You can add and experiment with the code above by following the steps here: Inject Custom CSS Codes

    Do note that you should have only one of the 3 options there, not all three at the same time.

    Do let us know how it goes.