Standard navigation bar height smaller than screen size since widget update

0
Hi, we face the eissue that since we updated our widgets the standard Atlas navigation bar has a calculated height that ends in the middle of the screen instead use the full screen height. The CSS class affecting the scroll container is: mx-scrollcontainer-left region-sidebar mx-scrollcontainer-toggleableThe size is: width: 232 px (as defined) , height: 462,08 (computed)So how and where can I change the computed height to full screen height (again)?Thanks for help, Timo
asked
3 answers
2

Hi Timo Bakenecker

Your sidebar (mx-scrollcontainer-left region-sidebar) is no longer stretching to full height because a parent container lost its 100vh / flex height rules after the update.


try using this


/* Force sidebar to full screen height */

.mx-scrollcontainer-left.region-sidebar.mx-scrollcontainer-toggleable {

width: 232px;

height: 100vh; /* full screen */

height: 100dvh; /* modern mobile-safe */

overflow: hidden;

}


/* Make inner content scroll */

.mx-scrollcontainer-left .mx-scrollcontainer-wrapper {

height: 100%;

overflow: auto;

}


/* Ensure layout fills the viewport */

.mx-page, .region-content {

display: flex;

min-height: 100vh;

}


I hope it helps


answered
1

The issue occurs because after the widget update, the sidebar no longer inherits the full height from its parent container. As a result, the computed height stops in the middle of the screen.


Solution: Force the sidebar to use the full viewport height.


.mx-scrollcontainer-left.region-sidebar.mx-scrollcontainer-toggleable {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto;
}
answered
0

The issue occurs because the sidebar is no longer inheriting full height from its parent after the update, so Mendix calculates a smaller height. Fix it by forcing full viewport height via CSS. Add this to your theme:

html, body, .mx-appcontainer {
  height: 100%;
}
.region-sidebar,
.mx-scrollcontainer-left {
  height: 100vh !important;
}

This ensures the sidebar always takes full screen height instead of a computed partial height.

answered