sap.tnt.ToolPage side content overlaps main content

Nov 23, 2016 at 12:45 PM


avatar image

Dear all
I am creating an application based on the sap.tnt.ToolPage layout control. Everything works perfectly, besides the first rendering, where the contents of the "mainContents" aggregation are rendered beneath the contents of the "sideContent".

This is happening regardless of the state of the side content, whether it is collapsed or expanded.

The rendering is then corrected when expanding/collapsing the side content: the view is re-rendered and contents of "mainContents" move to the right instead of staying beneath.

The behavior can be checked easily also in the SAPUI5 Explored test app here:


When entered for the first time, the right side of the view seems to be empty, but if you click on the upper-left toggle button, the right side content is revealed. Clicking again on the button will now "move" the contents to the right.

Is this a known bug? Anyone knows about an effective workaround?



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

2 Answers

Ulrich Block
Nov 23, 2016 at 02:49 PM

Can you attach a screenshot? Also describe which os and browser you are using. On latest MacOS and Chrome there is text in the main view right away.

10 |10000 characters needed characters left characters exceeded
Roberto Pagni
Nov 24, 2016 at 09:00 PM

Hello Ulrich,
I just reproduced the issue while working on Chrome (latest) on a Windows 10 machine.

Here are the screenshots:
In the Explored app, just open the Tool Page sample. You see that at the first rendering the right-side is empty.

After clicking on the "collapse sidebar" button, the text appears:

Click again on the "collapse sidebar" (which now will expand it) and notice that the next is not hidden anymore, but moves on the right while the sidebar is expanding:

By the way, if the Sidebar is rendered for the first time as "collapsed" (Property expanded = false) than everything is working as expected and the right side content is there right away.

Hope this helps!


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

You might want to retry in different browsers. I guess you have found a bug related to painting and might want to raise it to the UI5 developers. Depending on the browser, the paint frequency can be different and lead to such effects.

A really dirty workaround would be triggering the renderer onAfterRendering:

onAfterRendering: function() {

Depending on your app you might even want to apply it at a later point of the process.


Hello Ulrich,
I guess you're right: in fact I just did the same using Edge as well as Firefox (both latest) and everything works properly as expected.
I will address this to the UI5 team.


Skip to Content