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. Image for the cookie policy date

Unable to display navigation bar properly for first time and after resize, it works correctly.


I am using navigation drawer to create menu. When I start the project and click on navigation drawer it does not appear properly, see below image.

After resize of browser it works correctly, see below image.

Could you please let me know where is the issue.

Please find the attached sample to demonstrate the problem.

Attachment: TravelEx_27066a30.rar

1 Reply

NP Narayanasamy Panneer Selvam Syncfusion Team July 8, 2016 12:53 PM UTC

Hi Manish,   
Thanks for Contacting Syncfusion support.     
We were able to reproduce the reported issue with NavigationDrawer and the it will be will be resolved in the next service pack volume release (Volume 2 SP1).   
Untill that we suggest you to use any one of following method to achieve your requirement.   
Method 1:   
Use  width for the listview content from”auto” to “100%”. Please find the code sample below.   
Code example:   
Method 1:   
#list .e-content{ 
            width:100% !important; 
Method 2:   
@Html.EJ().NavigationDrawer("navpane").Direction(NavigationDrawerDirection.Right).Type(NavigationDrawerType.Overlay).EnableListView(true).TargetId("butdrawer").ContentId("content_container").ListViewSettings(settings =>   
               settings.Width(300).SelectedItemIndex(0).ShowHeader(false).ClientSideEvents(events => { events.MouseUp("headChange"); }).PersistSelection(true);   
            <li data-ej-imageurl="../Images/navigationdrawer/home.png" data-ej-text="Home" data-ej-rel='nofollow' href="#home"   
            <li data-ej-imageurl="../Images/navigationdrawer/people.png" data-ej-text="People" data-ej-rel='nofollow' href="#people"   
            <li data-ej-imageurl="../Images/navigationdrawer/profile.png" data-ej-text="Profile" data-ej-rel='nofollow' href="#profile"   
            <li data-ej-imageurl="../Images/navigationdrawer/photo.png" data-ej-text="Photos" data-ej-rel='nofollow' href="#photos"   
            <li data-ej-imageurl="../Images/navigationdrawer/communities.png" data-ej-text="Communities" data-ej-rel='nofollow' href="#communities"   
            <li data-ej-imageurl="../Images/navigationdrawer/locations.png" data-ej-text="Location" data-ej-rel='nofollow' href="#location"   
Use unobtrusive way to render Navigation drawer.     
We have modified the sample which is sent by you. Please find it in the below link http://www.syncfusion.com/downloads/support/forum/124897/ze/TravelEx-511722813     
Narayanasamy P.          

Live Chat Icon For mobile
Up arrow icon