When a label is associated with a control whose Validation settings set to Required = Yes, a red asterisk (*) is shown with the label as a visual indicator that this field is required.
However, the positioning of this indicator seems to be inconsistent as shown in the following image:
As you can see, the Title label appears by default when creating a new Nintex form on a list, and the * indicator appears immediately after the label text. However, with the two controls I manually inserted, each with Required = Yes, and their associated labels, the * indicator appears immediately below the label text.
Initially, I thought this was controlled via the default CSS being applied, but even when I apply the same CSS class to my manually inserted label (nf-form-label nf-section), the * indicator still appears below.
This leads me to think it has nothing to do with the CSS, and when I inspect the HTML of my manually inserted label I notice there's a <br> between the label text and the * indicator:
<span class="ms-formvalidation" title="This is a required field.">
As a comparison, the Title label (which was inserted by default) has no <br> break tag at all.
So, how can I control the positioning of the * indicator within my labels or at least prevent the <br> from being inserted automatically?
Solved! Go to Solution.
Please can you check if the HTML tag is included in the label text. If yes you can remove the text there. To check double click the label control and change to "Format Text" tab und choose "Edit Source".
When I Edit Source, I can confirm that indeed there's a <br/> tag at the end of my label text.
However, despite manually deleting the tag from the source editor and saving, the <br/> tag gets automatically re-inserted. Argh!
Also, if I Edit Source on the Title field, which was originally displaying the * indicator correctly, it also shows a trailing <br/> tag:
In fact, if I close the HTML Source window without making any changes then immediately re-open it, it gets worse:
Repeating this cycle seems to add more <br/> tags!
Problem identified: After playing around with this a bit more, I've found that this bug is due to the browser and was only occurring in Chrome but not Internet Explorer (I have not tested other browsers). How frustrating, but relieving to know there's a work-around!
As a post-script to this, the article Nintex Forms Supported Browsers indicates that designing Nintex Forms is only fully supported in IE10 or above. It's a shame that other browsers are not yet supported for design.
I had this same problem and it was driving me nuts. We use Chrome as our default browser. I opened in IE11, and was THEN able to get rid of the dreaded <br> tag injected at the end of the text. Once I published in IE, the asterisks showed up in the correct locations...