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>
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.
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.