Not able to display a sap.m.Page inside the content of another Page

[former_member256961]

Hello Friends/Gurus,

In one of my projects, I am trying to place a page inside the content of an outer page.

Unfortunately the output is not what I expected. Only the footer content of the outer Page is displayed and nothing else.

I have created an example at JS Bin - Collaborative JavaScript Debugging</title>  <link rel="alternate" type=&...

Even the title and header content of the outer page is not displayed even though it is available in DOM, please see the picture below

My assumption is since the content is agreegation of sap sap.ui.core.Control[] and the base class of a page or any other control is sap.ui.core.Control[], the outer Page should be able to take another Page as its content.

Is my understanding correct? If my understanding is correct, then is this a bug in UI5?

Any help is highly appreciated, many thanks.

Regards,

Chidan

[AndreasKunz · Accepted solution]

Hi,

Pages inside Pages are not recommended. You can try it by setting "enableScrolling" of the outer Page to "false", this fixes the content height and allows the inner page to properly use 100% height.

Regards

Andreas

[former_member256961 · Accepted solution]

Hi Andreas,

Thanks, but this doesnt work incase I have multiple inner pages, in that case if I disable scrolling on the outer page, obviously I will not be able scroll to all my pages.

I am trying aggreagate binding inner pages to the outer pages (may be I am crazy!!!)

I believe this is a bug.

Regards,

Chidan

[ffleige · Accepted solution]

Hi,

the issue is caused by the fact, that the App-Container is styled with a total height of 100%.

For me i fixed this by using the new calc() function of CSS3: http://css-tricks.com/a-couple-of-use-cases-for-calc/

<mvc:View
  xmlns:mvc="sap.ui.core.mvc"
  displayBlock="true"
  xmlns="sap.m"
  controllerName="my.sample.view.App"
  >
  <App id="myAppContainer" />
</mvc:View>

sap.ui.controller("my.sample.view.App", {
  onAfterRendering: function() {
       jQuery("#myAppContainer").css("height","calc(100% - 49px)");
  },
});

[former_member227538 · Accepted solution]

This is the solution to the problem where, the footer of the inner page was missing. the value "49px" has to be changes based on the height of the elements above the inner page. This worked for me. Thank Frank.

[former_member91307]

Hi Chidan,

Yes the understanding is right.

sap.m.Page renders well inside the sap.m.App control

Please find below modified jsbin

http://jsbin.com/siqoqarole/2/edit?html,output

Thanks and Regards, Venkatesh

[former_member256961]

HI Venkatesh,

This is similar to the example I had created but this has errors as you can see in your example the contentMiddle and content of inner page are not displayed, but this you can still see in the DOM.

Only the footer of inner page is displayed. I think this is a bug if not can some UI5 gurus help me here.

WHat I want to achieve is somehting similar to below link where we have page inside a page

OpenUI5 Explored

Regards,

Chidan

[former_member91307]

Hi

Please find below edited jsbin.

JS Bin - Collaborative JavaScript Debugging</title> <link rel="alternate" type=&q...

Thanks and Regards, Venkatesh

[former_member256961]

HI Venkatesh,

Thanks, but now the footer of inner page is missing.

Regards,

Chidan