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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

124897 Jul 7,2016 07:29 AM UTC Jul 8,2016 12:53 PM UTC ASP.NET MVC 1
loading
Tags: NavigationDrawer
Manish
Asked On July 7, 2016 07:29 AM UTC

Hi,

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 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:   
<style>   
#list .e-content{ 
            width:100% !important; 
        } 
 
</style>   
    
  
   
    
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);   
           }).ContentTemplate(@<ul>   
            <li data-ej-imageurl="../Images/navigationdrawer/home.png" data-ej-text="Home" data-ej-rel='nofollow' href="#home"   
                id="navhome"></li>   
            <li data-ej-imageurl="../Images/navigationdrawer/people.png" data-ej-text="People" data-ej-rel='nofollow' href="#people"   
                id="navpeople"></li>   
            <li data-ej-imageurl="../Images/navigationdrawer/profile.png" data-ej-text="Profile" data-ej-rel='nofollow' href="#profile"   
                id="navprofile"></li>   
            <li data-ej-imageurl="../Images/navigationdrawer/photo.png" data-ej-text="Photos" data-ej-rel='nofollow' href="#photos"   
                id="navphotos"></li>   
            <li data-ej-imageurl="../Images/navigationdrawer/communities.png" data-ej-text="Communities" data-ej-rel='nofollow' href="#communities"   
                id="navcommunities"></li>   
            <li data-ej-imageurl="../Images/navigationdrawer/locations.png" data-ej-text="Location" data-ej-rel='nofollow' href="#location"   
                id="navlocation"></li>   
        </ul>)   
   
  
   
   
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     
    
Regards,   
Narayanasamy P.          
  


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.

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

;