Navigation Drawer not showing collapsible items

[Matt Broich]

Hi,

I am currently trying to make certain items within the navigation drawer collapsible, however, none of the items are visible. Here is a sample code snippet:

<ej:NavigationDrawer ID="NavDrawer" ClientIdMode="Static" ClientSideOnBeforeClose="beforeClose" runat="server" Direction="Left" Type="Overlay" 

            EnableListView="true" TargetId="container-menu" ContentId="content_container">

     <ListViewSettings Width="300" SelectedItemIndex="0" ShowHeader="true" HeaderTitle="Navigation"

          ShowHeaderBackButton="true" HeaderBackButtonText="Back" MouseUp="navClick" />

     <Items>

          <ej:NavigationDrawerItems Text="Home" >

               <Items>

                    <ej:NavigationDrawerItems NavigateUrl="A.aspx" Text="A"></ej:NavigationDrawerItems>

                    <ej:NavigationDrawerItems NavigateUrl="B.aspx" Text="B"></ej:NavigationDrawerItems>

                    <ej:NavigationDrawerItems NavigateUrl="C.aspx" Text="C"></ej:NavigationDrawerItems>

                    <ej:NavigationDrawerItems NavigateUrl="D.aspx" Text="D"></ej:NavigationDrawerItems>

               </Items>

          </ej:NavigationDrawerItems>

          <ej:NavigationDrawerItems NavigateUrl="W.aspx" Text="W"></ej:NavigationDrawerItems>

          <ej:NavigationDrawerItems NavigateUrl="X.aspx" Text="X"></ej:NavigationDrawerItems>

          <ej:NavigationDrawerItems NavigateUrl="Y.aspx" Text="Y"></ej:NavigationDrawerItems>

          <ej:NavigationDrawerItems NavigateUrl="Z.aspx" Text="Z"></ej:NavigationDrawerItems>

     </Items>

</ej:NavigationDrawer>

For instance, the Home item will show, but A, B, C, and D will not and once the menu button is clicked, the navigation drawer automatically opens the drawer to the collapsible. Is there a specific property I am missing?

Thank you!

[Ashokkumar Balasubramanian]

Hi Matt, 

 

Good day to you. 

 

We have checked with your scenario and able to reproduce the reported issue “Home item will not show, but A, B, C, and D”, This issue occurs because the height of the child list items is set to zero while the list is being initialized. You can add the below mentioned CSS styles in your page to overcome this issue at your end. Please check it below. 

 

<style> 

        .e-nb-layout .e-nb-listview .e-childitem .e-list-container{ 

            height: auto !important; 

        }  

</style> 

 

Please let us know, if you have any concern on this. 

 

Regards, 

Ashokkumar B. 

[Matt Broich]

Thank you Ashokkumar, that fixed my issue. 

[Ashokkumar Balasubramanian]

 

Hi Matt, 

 

Most Welcome. 

 

Please let us know, if you need any further assistance. 

 

Regards, 

Ashokkumar B.