CSS on SAPUI5 Controls

Question

I have a sap.m.Input inside a div tag in HTML view of sapui5. When I apply css to the div, it works fine on all the div elements. However, I want to apply css on a single control inside the div tag. It is not working. The code is :

<div data-sap-ui-type="sap.m.Label" data-text="Sr.No :"></div>
<div data-sap-ui-type="sap.m.Input" id="id_SrNo_Val" data-width ="10%"></div>

The above code does not work if I apply css to the input. It works fine on the label. I am trying to reduce the height of the input. It works on Chrome console with runtime id. However I want to apply css with the given id which it does not accept. Please help.

Answer 1

In SAPUI5 we don't know at which point time of CSS is applied to the Controls.

So you've to give "priority to your css class or id" which can be achieved using the property !important

Add your CSS property like following

#id_SrNo_Val {
     height : 10px !important;
     color : blue !important;
}

Use anything you want with !important property.

Update: Avoid !important because it'll become harder to debug at some point of time. Also in CSS, it's not suggested to use.

Answer 2

You may assign additional class to a control adding class="yourStylingClass" attribute.

You shouldn't use control ids for styling, since SAPUI5 may modify those, add prefixes etc.