Panels overlay sidebar

[Raul]

Hi, Im using Dashboard layout control but it overlays my sidebar, which is set to "over" I tried to set zIndex on both controls but nothing works.

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Raul, 

  

Greetings from Syncfusion support. 

  

We have validated your reported issue that while setting the Type of the Sidebar as Over, Dashboard Layout overlays the Sidebar element. But we are unable to reproduce the reported issue.  

  

We would like to let you know that, when setting the Sidebar’s type as Over, Sidebar will expand over its main container element (For instance: we may have Dashboard Layout as Sidebar’s main element).  

  

If your requirement is to show both the Sidebar and the Dashboard Layout components adjacently in your view page.  

  

We suggest you set the Sidebar type as Auto (default type), Push or Slide based on your requirement. 

  

Please, check the links below to know more about Type property of Sidebar. 

  

Types: https://ej2.syncfusion.com/documentation/sidebar/variations/  

  

For your reference, we have prepared a simple sample, in which the Sidebar expands over its main container element on a button click. 

  

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1693343830.zip  

  

To know about API’s of Sidebar, refer the following link. 

  

https://ej2.syncfusion.com/documentation/api/sidebar/#enablegestures  

  

Demos: https://blazor.syncfusion.com/demos/Sidebar/DefaultFunctionalities?theme=bootstrap4  

  

Documentation: https://ej2.syncfusion.com/blazor/documentation/sidebar/getting-started/  

  

If the issue persists in your end. Share us more details regarding your requirement like listed in the following, it will be helpful for us to resolve your issue at earlier. 

  

1.         Is there any component rendered inside the Dashboard Layout? 

  

2.         NuGet Package and script version used in your application. 

  

3.         Exact requirement details. 

  

4.         Screenshot or video sample of the reported issue. 

  

5.         If possible, share us the issue reproducing sample. 

  

Regards, 

Shameer Ali Baig S. 

[Raul]

I have a razor component which contains the side bar, then I set this component on MainLayout and I toggle it via a toggle button which lives in MainLayout, also MainLayout also contains @Body which displays all the pages, in the index page I have the , I also tried to encapsule EjsDashboardLayout to a razor component and call both components on main layout but it still shows the panels overlaying the sidebar, the only way it works is if the sidebar code lives directly in the page where you code EjsDashboardLayout.

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Raul, 

 

We have checked your attached code sample. By default, sidebar component performs the (expand/collapse) operation only on its next sibling element, regardless of whatever the type(Push, Over, slide).  

 

We suspect that the issue might have occurred due to any problem with below possible cases.  

 

Please ensure the below cases are covered in your application. 

 

1.                The immediate sibling element of the Sidebar will be considered as the main content. 

 

2.                If the header element is the next immediate element of the Sidebar, then it will be considered as its main content. Sidebar will expand properly over its main container (i.e., header element) element.  

 

3.                If Dashboard Layout is not the main container element (or) a part of main container element of Sidebar. Then, Sidebar it will not expand over the Dashboard Layout component. 

 

4.                When target property is used, Sidebar expands over the next immediate element of its target element. 

 

Any problems with implementing the Sidebar without taking into account the above cases can result as your stated problem. 

 

So, to resolve the issue, you can wrap all the elements (whatever you want to display in right side content of the sidebar) in single div and place the element next to the sidebar element. 

 

For your reference, we have prepared a sample. In which we have placed the Sidebar in the main layout page and render the Dashboard Layout inside the body element.  

 

Refer the sample link below. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/sidebar_with_dashboard2129076827.zip   

 

Please let us know, if you need any further assistance. 

 

Regards, 

Shameer Ali Baig S.