The asterisk positioned on a label of a required field returns to the line

[jacques-lebourgeois]

Prerequisites

• [x] I have searched for duplicate or closed issues
• [x] I have validated any HTML to avoid common problems
• [x] I have read the contributing guidelines

Describe the issue

In some of our GUIs, the width of a field label may correspond exactly to the width of the label text. In this case, if the field is mandatory, the asterisk added by the required class is on the line, giving a negative visual effect.

Reduced test cases

Here is an example : https://codepen.io/jacques-lebourgeois/pen/vYogBLW

with the screenshot :

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Boosted are you using?

5.3

[jacques-lebourgeois]

I don't know what it's worth, but here's a workaround that seems to work on chrome and firefox :

https://codepen.io/jacques-lebourgeois/pen/jOgyNyo

[julien-deramond]

Thanks @jacques-lebourgeois for having reported this issue and provided a patch. It's going to be released in the v5.3.4. In the meantime, you can override the behavior in your project with the following code: https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/2760/files