Sidebar overlaps Toolbar

[James Bennett]

I'm building off a SyncFusion sample that has a Toolbar at the top and SideBar on the left.  The Toolbar should have a toggle on the left to hide/show the Sidebar but it doesn't appear.  It seems that the Sidebar overlays the entire left of the screen covering the Toolbar.

SyncFusion v18.4.0.42

Attachment: SyncFusionPlay_406684e1.zip

[Indhumathy Loganathan]

Hi James, 

 

Greetings from Syncfusion support. 

 

We have validated your reported query in Sidebar component. In your sample, you have not set the correct Target due to which the toolbar icons are hidden by the Sidebar. The Target property allows to place the sidebar inside the target element. By setting the div height, you can show the sidebar for the entire screen. 

 

Please refer to the below code snippets. 

 

<SfSidebar @ref="sidebarObj" Width="280px" @bind-IsOpen="SideBarIsOpen" DockSize="70px" EnableDock="true" Target="@Target"> 

... 

... 

<div class="main" style="height:565px;"> 

    <div class="content px-4"> 

        @Body 

    </div> 

</div> 

... 

... 

@code{ 

    SfSidebar sidebarObj; 

    public string Target = ".main"; 

    ... 

    ... 

} 

 

Please find the sample demonstrating the solution. 

 

https://www.syncfusion.com/downloads/support/forum/162448/ze/SyncFusionPlay-2056703500 

 

Please refer the following links to know more about the Blazor Sidebar component. 

 

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

 

Demos: https://blazor.syncfusion.com/demos/sidebar/default-functionalities?theme=bootstrap4 

 

API Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html 

 

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

  

Regards,  

Indhumathy L 

[James Bennett]

That worked, thanks!

[Keerthana Rajendran]

Hi James, 

 

Most welcome. We are glad to hear that the issue has been resolved. Please get back to us if you need further assistance. 

 

Regards, 

Keerthana.