Skip to Content

UI5 app not loading css libraries

May 11, 2017 at 02:49 PM


avatar image
Former Member

Hi, I am working with webide and I am using BlockLayout. The Blocks are displayed just fine bue the property 'Background' doesn't work.

The blocks are rendered on screen and the class sapUiBlockLayoutBackgroundMixed is added. However it doesn't do anything. If I open the debug console the class doesn't appear under the styles sections ( only .sapUiBlockLayoutSizeL .sapUiBlockHorizontalCellsRow, .sapUiBlockLayoutSizeXL .sapUiBlockHorizontalCellsRow, .sapUiBlockLayoutSizeM .sapUiBlockHorizontalCellsRow ).

These are the libraries I'm loading:

Any ideas ? thanks !

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Sharath M G May 11, 2017 at 03:31 PM

Do an inspect element of the container on the chrome browser.

Identify the exact element to check the actual classes being applied to the container.

Now, modify the class in the styles to include the background property.

It should work.



Show 2 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Yes, but the class doesnt appear. The classes are aplied but theres no style associated to them. The class sapUiBlockLayoutBackgroundMixed should be adding the style with the color and it doesn't.

noclass.jpg (103.0 kB)

The element you have selected has the class sapUiBlockCellContent and that appears int he Styles tab of debugger

The other classes in yellow need not necessary appear as the styles tab focusses on the styles in the selected element.

If your requirement is for a background, try to edit at runtime by applying the background property to the class in the styles tab. If it has an impact on the screen, go and modify the styles in your CSS page.

To your query "sapUiBlockLayoutBackgroundMixed". That has got applied at a very high level of the dom. Now, many times even though we use single control, when it's rendered on the screen, its a hierarchial DOM tree. Always we dont get the desired effect, by just applying a css class in XML.