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:

.mOHeader{

  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

xmlns:html=”http://www.w3.org/1999/xhtml

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.

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply