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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:





124897 Jul 7,2016 03:29 AM Jul 8,2016 08:53 AM ASP.NET MVC 1
Tags: NavigationDrawer
Asked On July 7, 2016 03:29 AM


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

Narayanasamy Panneer Selvam [Syncfusion]
Replied On July 8, 2016 08:53 AM

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.          


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.

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.