How to fix the height of sidebar, so that the content will displayed correctly. Also the button in the lower part is not displayed it needs to adjust the zoom in - zoom- out of the desktop before to see the full content.

Sidebar and Dockmenu height | Blazor | Sidebar

SM Shalini Maragathavel Syncfusion Team November 22, 2021 11:46 AM UTC

Hi Belle,

Greetings from Syncfusion support.

We checked your query, and you can show the Sidebar to the entire screen by setting the main content class as e-main-content as demonstrated in the below code snippet.

<SfSidebar @ref="sidebarObj" @bind-IsOpen="SidebarToggle">

. . .

</SfSidebar>

<div class="title default" style="text-align: center">Main content</div>

</div>

Please find the below sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sidebar_blazor-1249446659350110413.zip

If your reported problem persists, then please share the following information to validate further.

If possible, replicate your reported problem in the above sample or provide a simple sample to replicate the issue.
Share your complete Sidebar rendering code.
Syncfusion package version.

This information would help us to find the exact cause of your reported problem and to provide the prompt solution.

Regards,

Shalini M.

BC Belle Cruz November 23, 2021 09:39 AM UTC

Thank you Shalini

But it didn't work on my sidebar height.

#maintext.main-content {

height: 100vh;

z-index: 1000;

}

SM Shalini Maragathavel Syncfusion Team November 24, 2021 12:19 PM UTC

Hi Belle,

Good day to you.

We checked your query and would like to let you know that we are unable to reproduce the reported issue in our provided Sidebar sample.

Please find the video demonstration for your reference,

Video demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sidebarheight-1191592856.zip

If your reported problem persists, then please share the following information to validate further.

Share your complete Sidebar rendering code with CSS or replicate your reported problem in the above sample.
Syncfusion package version.

This information would help us to find the exact cause of your reported problem and to provide the prompt solution.

Regards,

Shalini M.

BC Belle Cruz November 25, 2021 06:06 AM UTC

<style>

/* header-section styles */

#header.header-section,

#header .search-icon {

height: 50px;

width: 1920px; /*header-section width 11.03.2021*/

}

#header #hamburger.icon-menu {

font-size: 24px;

float: left;

line-height: 50px;

}

#header .right-header {

height: 35px;

padding: 7px;

float: right;

}

#header .center-header {

height: 35px;

}

#header .list {

list-style: none;

cursor: pointer;

font-size: 16px;

line-height: 35px;

}

#header .header-list {

padding-left: 15px;

margin: 0;

}

@@media(max-width:500px) {

#header .right-header.list.support,

#header .right-header.list.tour {

display: none;

}

/* text input styles */

#header .search-icon {

float: left;

padding-left: 15px;

border: 0px solid #33383e !important;

background: linear-gradient(to left, #afd0d1, #23a59d);

cursor: text;

width: 10em;

}

#header .search-icon:focus {

outline: none;

cursor: default;

}

/* end of text input styles */

/* end of header-section styles */

/* content area styles */

#maintext.main-content {

height: 100vh;

z-index: 1000;

}

/*InventoryHive 11.03.2021*/

#maintext .content {

margin-top: 0;

text-align: left;

font-size: 15px;

color: #1784c7;

}

/* end of content area styles */

/* menu styles */

/* horizontal-menu styles */

#header .header-list .horizontal-menu .e-menu-item {

height: 35px;

vertical-align: middle;

font-size: 16px;

line-height: 35px;

}

#header .e-menu-item .e-caret {

line-height: 35px;

}

/* end of horizontal-menu styles */

/* vertical-menu styles */

.sidebar-menu .e-menu-container ul .e-menu-item.e-menu-caret-icon {

width: 220px;

}

.sidebar-menu .e-menu-container ul .e-menu-item:hover, .e-menu-wrapper ul .e-menu-item.e-focused:hover {

background: linear-gradient(to left,#afd0d1, #23a59d);

}

.e-menu-container ul .e-menu-item.e-selected {

background: linear-gradient(to left, #afd0d1, #23a59d);

}

/* URL customization*/

/* end of vertical-menu styles */

/* end of menu styles */

/* Sidebar styles */

/* docksidebar styles */

.e-menu-container ul .e-menu-item .e-caret,

#header .search-icon,

.sidebar-menu .action-btn,

#header .e-menu-item .e-caret,

.e-menu-container ul .e-menu-item,

.sidebar-menu .e-menu-text,

.e-menu-container .e-menu-text,

.e-menu-container .e-ul .e-menu-item .e-menu-url .e-menu-icon {

color: #fff !important;

}

/*Sidebar text color 11.05.2021*/

.sidebar-menu .e-menu-text {

font-size: 13px;

}

/*Container text color 11.05.2021*/

.e-menu-container .e-menu-text {

font-size: 13px;

}

.e-close .e-menu-container ul .e-menu-item {

width: 50px;

}

.e-close ul .e-menu-item.e-menu-caret-icon {

padding-right: 12px;

}

.sidebar-menu.e-dock.e-close .e-menu-container ul .e-menu-item .e-caret,

.sidebar-menu.e-dock.e-close .main-menu-header,

.sidebar-menu.e-dock.e-close .action-btn {

display: none;

}

.sidebar-menu.e-dock.e-close .e-menu-wrapper ul .e-menu-item.e-menu-caret-icon,

.sidebar-menu.e-dock.e-close .e-menu-wrapper ul.e-vertical {

min-width: 0;

width: 50px !important;

}

.sidebar-menu.e-dock.e-close .e-menu-wrapper ul.e-menu {

font-size: 100px !important;

}

.sidebar-menu.e-dock.e-close .e-menu-item .e-menu-icon {

font-size: 25px;

padding: 0;

width: 35px !important; /*sidebar-icon width 11.03.2021*/

}

.e-menu-container ul .e-menu-item.e-focused {

background: linear-gradient(to left, #afd0d1, #23a59d);

}

#header ul {

overflow: hidden;

}

.sidebar-menu, #header ul, .e-menu-container, .e-menu-container ul {

background: linear-gradient(to left, #afd0d1, #23a59d);

color: #fff !important;

}

/* end of docksidebar styles */

/*end of Sidebar styles */

/*main-menu-header styles */

.sidebar-menu .main-menu-header {

padding-left: 4px 0 0 18px;

background: linear-gradient(to left, #afd0d1, #23a59d);

}

/*end of main-menu-header styles */

/*button styles */

/* .sidebar-menu .action-btn {

margin-left: 16px;

width: 165px;

height: 30px;

font-size: 13px;

border-radius: 5px;

}

.sidebar-menu .action-btn {

background-color: #1784c7;

}*/

/*end of button styles */

/* custom code start */

.center {

text-align: center;

display: none;

font-size: 13px;

font-weight: 400;

margin-top: 0;

}

.sb-content-tab .center {

display: block;

}

#sb-content-header {

display: none

}

.sb-content-section {

border: 0;

}

.col-md-12, body {

padding: 0;

}

.sidebar-menu {

margin-left: 0px;

}

/*body styles */

body {

margin: 0;

overflow-y: hidden;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

-webkit-tap-highlight-color: transparent;

}

/*end of body styles */

/* custom code end */

/*icon styles */

@@font-face {

font-family: 'fontello';

src: url('data:application/octet-stream;base64,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') format('truetype');

}

#header .icon-menu:before {

content: '\e812';

}

.sidebar-menu .icon,

#header #hamburger.icon-menu {

font-family: 'fontello';

}

.sidebar-menu .e-menu-icon::before {

color: #FBFFFC; /*icon color 11.03.2021*/

}

.e-bigger #maintext .paragraph-content {

font-size: 16px;

}

#maintext .sidebar-heading {

font-size: 16px;

font-weight: 500;

}

.e-bigger #maintext .sidebar-heading {

font-size: 18px;

}

/* vertical-menu styles */

.sidebar-menu .e-menu-container ul .e-menu-item.e-menu-caret-icon {

width: 220px;

}

.e-close .e-menu-container ul .e-menu-item {

width: 50px;

}

.e-close ul .e-menu-item.e-menu-caret-icon {

padding-right: 12px;

}

.sidebar-menu.e-dock.e-close .e-menu-container ul .e-menu-item .e-caret {

display: none;

}

.sidebar-menu.e-dock.e-close .e-menu-container ul .e-menu-item.e-menu-caret-icon,

.sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical {

min-width: 0;

width: 50px !important;

}

.sidebar-menu.e-dock.e-close .e-menu-container ul.e-menu {

font-size: 0;

}

.sidebar-menu.e-dock.e-close .e-menu-item .e-menu-icon {

font-size: 20px;

padding: 0;

}

.tailwind-dark #wrapper .e-toolbar {

border-bottom: 1px solid #4b5563;

}

.material #wrapper .e-toolbar {

border-bottom: 1px solid rgba(0,0,0,0.12);

}

.tailwind #wrapper .e-toolbar {

border-bottom: 1px solid #e5e7eb;

}

.bootstrap5-dark #wrapper .e-toolbar {

border-bottom: 1px solid #444c54;

}

.bootstrap5 #wrapper .e-toolbar {

border-bottom: 1px solid #d2d6de;

}

/*Search 11.03.2021*/

/* input[type=text] {

width: 110px;

box-sizing: border-box;

background: linear-gradient(to left, #62ddb8, #23a59d);

border-radius: 0px;

font-size: 12px;

background-position: 10px 10px;

background-repeat: no-repeat;

padding: 12px 20px 12px 40px;

-webkit-transition: width 0.4s ease-in-out;

transition: width 0.4s ease-in-out;

}

input[type=text]:focus {

width: 10%;

}*/

/*Homepage 11.04.2021*/

/* .topnav {

overflow: hidden;

}

.topnav a {

color: white;

text-align: end;

padding: 4px;

font-size: 10px;

margin-left: 11px;

}

*/

.e-menu-container .e-ul .e-menu-item .e-menu-icon {

color: white !important;

}

</style>

here is my css for my sidebar and dockmenu

SS Sharon Sanchez Selvaraj Syncfusion Team November 26, 2021 01:44 PM UTC

Hi Belle,

Thanks for the details.

We have used the provided styles in our application and modified the sample. We have also attached a video for your reference, where we have shown that the height occupies the page properly in our application.

Refer to the modified sample link:

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

Refer to the video attachment:

https://www.syncfusion.com/downloads/support/directtrac/general/ze/SidebarToggle-1951884917

We suspect that the issue might be specific to your application. Kindly check if there are any other CSS files which is overriding the styles. If possible, modify the above sample to replicate the exact issue so that we can check and assist you promptly.

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

Regards,

Sharon Sanchez S.

PJ Phill Jones September 17, 2025 03:50 PM UTC

I get what you’re describing — in Syncfusion (whether you’re using the Blazor, Angular, or React components), the sidebar height sometimes doesn’t match the viewport, so content and especially bottom buttons get hidden unless you zoom out. That usually happens because the sidebar isn’t set to stretch with the full height of the window, or its internal scroll isn’t enabled.

Here are a couple of reliable fixes you can try:

1. Make the sidebar full height of the viewport

.e-sidebar {
  height: 100vh !important;   /* Sidebar matches full screen height */
  display: flex;
  flex-direction: column;     /* So content + footer (button) stack properly */
}

2. Push your button to the bottom

Wrap your sidebar content and apply a flex layout:

<div class="e-sidebar-content">
  <div class="sidebar-body">
     <!-- your main sidebar items -->
  </div>
  <div class="sidebar-footer">
     <button class="e-btn">Save</button>
  </div>
</div>

.e-sidebar-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sidebar-body {
  flex: 1;
  overflow-y: auto;   /* Makes main content scrollable if too long */
}

.sidebar-footer {
  margin-top: auto;   /* Pushes button to bottom */
  padding: 10px;
}

3. If you want scroll instead of zoom hacks

Make sure the body or parent container doesn’t cut off height with fixed px values. Instead, rely on 100vh or 100% with flex. That way the zoom in/out won’t affect button visibility. Guideatour.

LD LeoLavanya Dhanaraj Syncfusion Team September 19, 2025 08:14 AM UTC

Belle, thank you for your suggestion and for providing details on customizing styles for the Sidebar component. This will certainly help other users customize the component.

Regards,

Leo Lavanya Dhanaraj

TK Toni Kroos September 29, 2025 02:29 PM UTC

It sounds like the sidebar and dock menu are stretching beyond the visible screen height, which is why the bottom button only shows up after zooming in or out. To fix this, you’ll need to adjust the sidebar’s height property so it matches the viewport height. In CSS, you can usually do this by setting something like:

```css

.sidebar {

height: 100vh; /* makes sidebar match the screen height */

overflow-y: auto; /* adds scroll if content overflows */

}

```

This way, the sidebar will always fit the screen, and any extra content can be scrolled instead of being hidden. If you’re using a desktop dock app, check its settings for “fit to screen” or “auto-resize” options—most of them let you scale the dock size independently so all buttons are visible without needing to zoom your desktop.

LD LeoLavanya Dhanaraj Syncfusion Team October 1, 2025 08:49 AM UTC

Toni, thank you for your suggestion and for providing details about Sidebar height customization. Please feel free to reach out to us for any further queries or assistance in the future.