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. Image for the cookie policy date
close icon

Sidebar doesn't fully collapse

I've tried your demos as well as other examples I've found online and nothing I've tried fully collapses the sidebar content. Can you see where I've messed up? I've attached the code.

Attachment: SidebarDoesn'tCollapse_3d89d9b5.rar

5 Replies

LD LeoLavanya Dhanaraj Syncfusion Team December 21, 2022 07:45 AM UTC

Hi Keith,

Greetings from Syncfusion support.

The dock state of the Sidebar reserves some space on the page that always remains in a visible state when the Sidebar is collapsed. It is used to show short-term content, such as icons, instead of lengthy text. To fully close the Sidebar, we recommend disabling the dock state by setting the EnableDock property to false.

For your reference, we have included a sample and links to the documentation, API reference, and demo for the Blazor Dock Sidebar component.

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfSidebar-1281716706.zip

Documentation : https://blazor.syncfusion.com/documentation/sidebar/docking-sidebar

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

Demo : https://blazor.syncfusion.com/demos/sidebar/dock?theme=fluent


Leo Lavanya Dhanaraj

KA Keith A Price December 21, 2022 06:20 PM UTC

I really struggle with your documentation. There always seems to be something missing or that I can't figure out.

In this case, my problem was that I hadn't installed the nuget Blazor.Themes package. I don't recall seeing any instructions that that was required when reading about the SideBar.

If it's there, it certainly isn't in an obvious place.

There should maybe be a perquisites section that lists everything we need to have done and in place for a component to work.

LD LeoLavanya Dhanaraj Syncfusion Team December 23, 2022 10:05 AM UTC

Keith , we would like to reassure you that our online documentation does contain detailed information on configuring and customizing the Syncfusion Blazor Sidebar component. We did mention the ThemStudio Nuget installation under the Add Style Sheet topic.

Also, we have added NOTE blocks to provide additional information for each topic. For more detailed information, you can refer to our online documentation, as mentioned in the link below.

Documentation : https://blazor.syncfusion.com/documentation/sidebar/docking-sidebar

Steps :

  1. Prerequisites
  2. Create a new Blazor App in Visual Studio
  3. Install Syncfusion Blazor Navigations NuGet in the App
  4. Register Syncfusion Blazor Service
    1. Blazor Server App
    2. Blazor WebAssembly App
  1. Add Style Sheet
    1. Blazor Server App
    2. Blazor WebAssembly App
  1. Add Script Reference
    1. Blazor Server App
    2. Blazor WebAssembly App
  1. Add Blazor Sidebar component
  2. Enable backdrop
  3. Enable Animation
  4. Navigation with Sidebar
  5. Advantages of Syncfusion Blazor Sidebar

Please get back to us if you need any further assistance.


Leo Lavanya Dhanaraj

KA Keith A Price December 23, 2022 04:13 PM UTC

Yep. I went through that page several time before submitting my support request. And reviewing it now I still don't see any mention of the need to install the Theme Nuget.

The section on the Style Sheet merely explains what the Link needs to be. Nothing (that could see) explains the need (or how) to actually install the themes on the computer.

This is not a complaint. It's feedback that I constantly struggle with your documentation to figure out everything I need to do to use your components (which I love, btw). It's not just the themes. I've had trouble with getting other components to work, too. Once I get it working, the controls are amazing. But it can be a real slog to figure out the sutbleties of getti

If I struggle, I gotta believe others do to. So, it might be worth considering revising your documentation.

LD LeoLavanya Dhanaraj Syncfusion Team December 28, 2022 11:30 AM UTC

Keith , We have included detailed instructions on how to install and refer to the theme style sheet in our Blazor component getting started documentation. For your reference, we have attached an image and highlighted the notes.

If you have followed these steps and are still experiencing issues, please provide more information about the specific difficulty or issue you are encountering. This will help us better understand the issue and consider making improvements on our end.

Live Chat Icon For mobile
Up arrow icon