We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Navigation Drawer not showing collapsible items

Thread ID:

Created:

Updated:

Platform:

Replies:

146651 Aug 12,2019 08:06 PM UTC Aug 14,2019 04:21 AM UTC ASP.NET Web Forms 3
loading
Tags: NavigationDrawer
Matt Broich
Asked On August 12, 2019 08:06 PM UTC

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 [Syncfusion]
Replied On August 13, 2019 01:12 PM UTC

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
Replied On August 13, 2019 01:24 PM UTC

Thank you Ashokkumar, that fixed my issue. 

Ashokkumar Balasubramanian [Syncfusion]
Replied On August 14, 2019 04:21 AM UTC

 
Hi Matt, 
 
Most Welcome. 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Ashokkumar B. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon