Skip to Content
avatar image
Former Member

Side navigation height is not working in SAP ui5

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)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Dec 10, 2017 at 12:25 PM

    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>
    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Dec 13, 2017 at 02:38 AM

    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

    Add comment
    10|10000 characters needed characters exceeded