如何在SAPUI5中动态将样式应用于标签元素

Question

I am new to SAPUI5 and am trying to apply a few styles to the label element. Below is the piece of the code in the controller.

onAfterRendering: function() {
    var busFunId = this.getView().byId("busFun");
    jQuery.sap.byId(busFunId.getId()).parent().css("width", "20%");
},

Below is the line of code for the label element in view.xml.

<Label text="Business Function" id="busFun"/>

Here, label element is rendered within a div with default css classes. I am trying to adjust the width by applying on the div element, the parent of the label element.

This is not taking effect. Please share a solution if anyone have faced the same.

Rendered HTML:

 <div class=""><label id="busFun" />sample</label></div> 

Expected HTML:

 <div class="" style="width:20%"><label id="busFun" />sample</label></div> 

Answer 1

If you only want to adjust the width, don't add styling, but make use of the property width . (check sap.m.Label for more properties you can use).

<Label text="Business Function" width="20%"/>

If the properties aren't sufficient for your styling, you can make use of css-class(es) to style your Label.

<Label class="custom" text="Business Function" width="20%"/>

If you decide to make use of css, don't forget to include a fileName.css file to your project and to register the file in your manifest.json as a resource.

Answer 2

Here are a few options:

Apply via JS with addStyleClass:

   this.getView().byId('yourControlId').addStyleClass("cssYouLoaded");

Load the css file via manifest:

"resources": {
            "css": [
                {
                    "uri": "content/css/style.css"
                }
            ]
        }

And apply on your element:

<Label text="Business Function" id="busFun" class="style"/>

If you area defining the css file, don't forge the !important. A lot of times the sapui5 Css overwrite your custom ones.

.imagemCabecalho {
  margin: 0 !important;
  padding: 0.4em !important;
  visibility: visible;
  width: 8em;
}