Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
0 Kudos

In index.html file,we can load custom css stylesheets like,

<link rel="stylesheet" type="text/css" href="css/sfi.css"/>

in this custom css code, we can define classes which can be added to elements, for ex:


  margin: 0rem;

  padding : .25rem;

  border-bottom: 1px solid #cdcdcd;


above class was added to objectHeader element in detail view.

Simultaneously default sap library.css adds .sapMOH class.

So , when we bootstrap UI5 in auto mode, our custom class overrides default sap class for objectHeader.

BUT, when we bootstrap UI5 in async mode, sap css class .sapMOH for objectHeader overrides our custom

css class .mOHeader.

Which make our custom changes ineffective.

Why, this happens?

As libraries are loaded asynchronously instead of loading all libraries at once in auto mode.

our custom css class is loaded before default sap css classes, which is opposite in auto mode.

What can be done in asynchronous mode:

As objectHeader element is in detail view of application, we should load our custom class in view itself. for ex:

Define html namespace


And, then load stylesheet

<html:link rel="stylesheet" type="text/css" href="css/sfi.css"/>

This will ensure our stylesheet is loaded after, default sap stylesheet and custom changes will be effective.

Note: Any suggestions for better solution are welcome.

Labels in this area