Side navigation height is not working in SAP ui5

[former_member38314]

My current Output is as below image using Side Navigation

img01.png

I want output like:

img02.png

Please help me... I tried as Sample provided in the link:

https://sapui5.netweaver.ondemand.com/sdk/#/sample/sap.tnt.sample.SideNavigation/code/V.view.xml

But it is not working.

[former_member38314]

Hi,

My Script has CSS, but still it was not working. .

I found a workaround for it by adding a Tool Page, I noticed that Side Navigator is not working alone. It works with ToolPage:

<mvc:View height="100%" controllerName="SAPAppSAPApp.controller.ViewApp" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:tnt="sap.tnt"> <App> <pages> <Page title="{i18n>title}"> <tnt:ToolPage id="toolPage"> <tnt:header></tnt:header> <tnt:sideContent> <tnt:SideNavigation id="sideNavigation" expanded="true"> <tnt:item expanded="true"> <tnt:NavigationList> <tnt:NavigationListItem text="{i18n>User}" icon="sap-icon://employee"> <tnt:NavigationListItem text="{i18n>Users}"></tnt:NavigationListItem> <tnt:NavigationListItem text="{i18n>AssignmentProfile}"></tnt:NavigationListItem> <tnt:NavigationListItem text="{i18n>Organization}"></tnt:NavigationListItem> <tnt:NavigationListItem text="{i18n>Regions}"></tnt:NavigationListItem> </tnt:NavigationListItem> <tnt:NavigationListItem text="{i18n>Learning}" icon="sap-icon://building"> <tnt:NavigationListItem text="{i18n>Item}"></tnt:NavigationListItem> <tnt:NavigationListItem text="{i18n>ScheduledOfferings}"></tnt:NavigationListItem> <tnt:NavigationListItem text="{i18n>Curricula}"></tnt:NavigationListItem> <tnt:NavigationListItem text="{i18n>Programs}"></tnt:NavigationListItem> </tnt:NavigationListItem> </tnt:NavigationList> </tnt:item> <tnt:fixedItem> <tnt:NavigationList> <tnt:NavigationListItem text="{i18n>About}" icon="sap-icon://card"/> </tnt:NavigationList> </tnt:fixedItem> </tnt:SideNavigation> </tnt:sideContent> <tnt:mainContents> <NavContainer id="pageContainer"> <pages> <ScrollContainer id="root1" horizontal="false" vertical="true" height="100%"> <HBox> <List id="dragableList" width="200px" items="{materials>/}"> <items> <StandardListItem title="{materials>description}"/> </items> </List> <Table id="dropableTable" inset="false" width="500px"> <columns> <Column hAlign="Center"> <Text text="Material"/> </Column> <Column hAlign="Center"> <Text text="Vendor"/> </Column> </columns> <items></items> </Table> </HBox> </ScrollContainer> <ScrollContainer id="page1" horizontal="false" vertical="true" height="100%"> <Text text="This is the first page"></Text> </ScrollContainer> <ScrollContainer id="page2" horizontal="false" vertical="true" height="100%"> <Text text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium architecto autem dicta dolor dolores dolorum earum enim error esse eum ex exercitationem explicabo facilis fugit ipsum maiores."></Text> </ScrollContainer> <ScrollContainer id="root2" horizontal="false" vertical="true" height="100%"> <Text text="This is the root page of the second element"></Text> </ScrollContainer> </pages> </NavContainer> </tnt:mainContents> </tnt:ToolPage> </Page> </pages> </App> </mvc:View>

Regards,

Jaic

[irfan_gokak]

Hi,

You need to add the CSS also at view level. Please check the CSS Link and the code.

// CSS Style.
.side-navigation-demo {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;


    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;


    max-width: 15rem;
}

// Apply at view

<mvc:View
	controllerName="sap.tnt.sample.SideNavigation.V"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.tnt"
	xmlns:m="sap.m"
	height="100%"
	class="side-navigation-demo">
<!--   Your slide navigation code here -->
<mvc:View>