rz-layout height on mobile

[albertolg]

Hi, on mobile devices the height of the layout in the material theme is not calculated right, as a workaround i did

.rz-layout { height: 100dvh; }

is possible to include it in a future release?

thanks

[akorchev]

Hi @albertolg,

We need additional information about this issue:

1. What is not calculated right?
2. Does the problem appear in other themes or just Material?

[albertolg]

hi @akorchev

1. when the sidebar have some menu and submenu and are expanded, some of them are not visible, I found that the 100vh on the mobile have issues, so after some research i found this article https://medium.com/@alekswebnet/fix-mobile-100vh-bug-in-one-line-of-css-dynamic-viewport-units-in-action-102231e2ed56
2. all the themes are affected.

I searched in the css files and found /* RadzenLayout styles */ .rz-layout { box-sizing: border-box; height: 100vh; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "rz-header rz-header" "rz-sidebar rz-body" "rz-footer rz-footer"; background-color: var(--rz-layout-background-color); }

and the @media (max-width: 768px) { body:has(> .rz-layout) { overflow-x: hidden; } .rz-layout { height: 100dvh; } .rz-header, .rz-footer, .rz-body { width: 100vw; } .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) { justify-content: end; } .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-header, .rz-layout:has(> .rz-sidebar-collapsed + .rz-sidebar-expanded) .rz-footer { margin-inline-start: auto; } .rz-layout:has(> .rz-sidebar-expanded + .rz-sidebar-expanded) .rz-body { width: auto; } }

where the dvh is used, but my tablet have an higher pixel width so it doesn't use it, am I wrong?