Search code examples
sapui5sap-fiori

Change asterisk position in label

I was reading through this website https://experience.sap.com/fiori-design-web/label/ and saw this: Label types So I was like "Sweet let's try it out!" and added required="true" to my label:

<Label required="true" text="E-Mail"/>

and this is what I got:
Asterisk on right

How do I bring the asterisk to the left side?

I'm using v1.81.0

Solution

  • The asterisk used to be on the left side but the new Fiori design guideline requires it to be on the right side which is implemented in UI5 since 1.73. Here is the related commit: https://github.com/SAP/openui5/commit/11544b855407af6f1025e8a855dc46701648779d.

    The new design for sap.m.Label requires the asterisk to be in the right side of the label.

    The picture in the guideline page is outdated.

    As the latest version of UI5 targets the latest Fiori design guidelines, I'd discourage from using any custom CSS which often leads to inconsistent UI and higher maintenance costs.