Using NavContainer Inside a sap.m.Dialog

[Former Member]

Hi All,

Is there a possibilty of using a NavContainer inside a sap.m.Dialog fragment . In PopOver it is possible to have it done but when trying with Dialog nothing is rendered inside the dialog . Here is the code :

<core:FragmentDefinition xmlns:core="sap.ui.core"

  xmlns:layout="sap.ui.layout" xmlns="sap.m">

  <Dialog title="Customer Search" type="Message">

  <NavContainer id="navCon">

  <Page id="master" title="Search ">

  <Label text="Customer Name"></Label>

  <Input></Input>

  <Label text="Payer Code"></Label>

  <Input></Input>

  <Label text="Customer City"></Label>

  <Input></Input>

  <Label text="Customer Postal Code"></Label>

  <Input></Input>

  <Label text="SBU" />

  <layout:ResponsiveFlowLayout>

  <RadioButton groupName="supplierCaused" text="Yes" />

  <RadioButton groupName="supplierCaused" text="No" />

  <RadioButton groupName="supplierCaused" text="No" />

  </layout:ResponsiveFlowLayout>

  <Label text="CBT"></Label>

  <Select id="searchCBT" width="100%"></Select>

  <Label text="Region" />

  <layout:ResponsiveFlowLayout>

  <RadioButton groupName="hisTransaction" text="Yes" />

  <RadioButton groupName="hisTransaction" text="No" />

  <RadioButton groupName="hisTransaction" text="No" />

  </layout:ResponsiveFlowLayout>

  </Page>

  <!--

  <Page id="detail" showNavButton="true" navButtonPress="onNavBack"

  title="Product">

  <Label text="Search Results" />

  </Page> -->

  </NavContainer>

  <beginButton>

  <Button text="Random" press="onDialogClose" />

  </beginButton>

  </Dialog>

</core:FragmentDefinition>

Regards

Mayank

[Former Member · Accepted solution]

Try setting Height to NavContainer.

[Former Member · Accepted solution]

Tried it! But it's not working but while inspecting the DOM i see the Nav Container being created .

Any other way to resolve this ?

Regards

Mayank

[AndreasKunz · Accepted solution]

What dimensions does the NavContainer have in the HTML?

Regards

Andreas

[Former Member · Accepted solution]

Hi Andreas,

Here is the DOM element of NavContainer :

<div id="navCon" data-sap-ui="navCon" class="sapMNav" style="width:100%;height:100%">

Kindly suggest . How to fix it ?

Regards

Mayank Jain

[former_member189945]

Try adding contentHeight to the Dialog:

<Dialog title="Customer Search" type="Message" contentHeight="100%">

That's how it is done on Popover example on SAPUI5 Explored.

[Former Member]

Hi ,

Setting the contentHeight to 100% worked but all the padding that Dialog provides is also gone.

Regards

Mayank

[former_member189945]

Hi,

This is quite a workaround but setting styles left and top and explicit width on the Navcontainer should "fix" it. Setting explicit width is required as otherwise the Navcontainer would expand beyond the Dialog. I also setted Page's showHeader to false as top and left affected it also.
.

<NavContainer id="navCon" class="testClazz" width="320px">

.testClazz {

    left: 20px;

    top: 20px; 

}