Skip to Content
0

Side navigation height is not working in SAP ui5

Dec 09, 2017 at 02:35 PM

67

avatar image
Former Member

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.

img01.png (51.3 kB)
img02.png (70.8 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Irfan Gokak Dec 10, 2017 at 12:25 PM
0

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>
Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member
Dec 13, 2017 at 02:38 AM
0

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:

http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:tnt="sap.tnt">

Regards,

Jaic

Share
10 |10000 characters needed characters left characters exceeded