In my attached example, I have a few issues:
Hi Nick,
Greetings from Syncfusion support.
Query 1 : I get a horizontal scrollbar in the sidebar when using any of the built-in dark themes.
We have made some changes to your shared Dock Sidebar sample to meet your requirements. You need to bind the theme class to the body element to override the theme styles. Now, you can customize the Dock Sidebar at CSS level for the corresponding classes based on the theme you select. We suggest you refer to the below CSS style to meet your requirements.
Refer to the below code snippet.
|
[MainLayout.razor] .tailwind-dark .e-list-parent .e-ul, .material-dark .e-list-parent .e-ul, .bootstrap-dark .e-list-parent .e-ul, .fabric-dark .e-list-parent .e-ul { Padding: 0 !important; }
.tailwind-dark .e-treeview .e-text-content, .material-dark .e-treeview .e-text-content, .bootstrap-dark .e-treeview .e-text-content, .fabric-dark .e-treeview .e-text-content { Padding: 0 !important; }
.tailwind-dark .e-treeview .e-list-text { font-size: 13px !important; }
.tailwind-dark .e-list-parent.e-ul { overflow: hidden !important; }
[_Host.cshtml] <body class=@(themeName)> … </body> |
We have performed similar style customization in our demo link as well.
Query 2 : Need to set background color for Dock menu.
We have validated your reported query. Whether you want the Dock menu's background colour to be applied when the sidebar is in an expanded state. Please clarify your use case.
Query 3 : Remove the White Strip at bottom of the main header.
You can remove the white line at the bottom of the main header by adjusting the height of the main header and by removing the border-bottom style.
Refer to the below CSS code snippet for your reference.
|
[MainLayout.razor.css] .top-row { … /*border-bottom: 1px solid #d6d5d5;*/ height: 55px; } |
Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dock_Theme1439199162.zip
Please check the attached sample and get back to us if you need any further assistance.
Regards,
Leo Lavanya Dhanaraj
Whether you want the Dock menu's background colour to be applied when the sidebar is in an expanded state. Please clarify your use case.
Yes, I would like to apply the background color in the expanded state as well.
Hi Nick,
Query: Need to set background color for Dock menu.
We have validated your reported query and we can achieve your requirement by using below CSS style.
|
.bootstrap-dark .e-list-item .e-text-content { //// you can set any background color to the menu item. background-color: aqua !important; } |
Could you please check the above code and get back to us, if you need any further assistance on this.
Regards,
YuvanShankar A
This only changes the background color for the SfTreeView components.
Hi Nick,
We have validated
your sample, you used menu component to render the below item (Home and
Text). So, only we have provided the background color for below mentioned item in our last update. Please refer the below screen shot and code snippet.
|
<SfMenu CssClass="dock-menu" TValue="MenuItem" Orientation="@VerOrientation"> <MenuItems> @foreach (var item in MainMenuItems) { <MenuItem Text="@item.Text" IconCss="@item.IconCss" Url="@item.Url" title="@item.Text"> @if (item.Items != null) { <MenuItems> @foreach (var item1 in item.Items) { <MenuItem Text="@item1.Text" IconCss="@item1.IconCss" Url="@item1.Url" title="@item1.Text"></MenuItem> } </MenuItems> } </MenuItem> } </MenuItems> </SfMenu> |
If we are misunderstanding your requirement, please share the screenshot (highlight the element) or video demonstration for which element do you want to change the background color. Based on that we will check and provide you a better solution quickly.
Regards,
YuvanShankar A
I want to change the background of the docked sidebar with the theme.
I have tried using 2 different css .e-menu-container for both light and dark theme since it is SfMenu but that doesn't work either.
Hi Nick,
Query: Need to set background color for Dock menu.
We have validated your reported query and we can achieve your requirement by using below CSS style.
|
.bootstrap5 .e-menu-parent .e-menu-item { background-color: lawngreen !important; } .bootstrap5 .e-menu-parent .e-menu-item:hover { background-color: green !important; } |
Could you please check the above code and get back to us, if you need any further assistance on this.
Regards,
YuvanShankar A
Not the exact answer I was looking for but I was able to adjust it for my needs. Thank you.
You're welcome Nick, please get back to us if you need any other assistance