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:
<label class="nf-label-control">
"Label Text"
<br>
<span class="ms-formvalidation" title="This is a required field.">
" "
"*"
</span>
</label>
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?