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

[Manish]

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]

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.