starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

rz-layout height on mobile #1787

New Issue
Closed
opened 2026-01-29 17:58:36 +00:00 by claunia · 2 comments
claunia commented 2026-01-29 17:58:36 +00:00
Owner
Copy Link

Originally created by @albertolg on GitHub (Jun 19, 2025).

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

Originally created by @albertolg on GitHub (Jun 19, 2025). 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
claunia commented 2026-01-29 17:58:36 +00:00
Author
Owner
Copy Link

@akorchev commented on GitHub (Jun 19, 2025):

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?
@akorchev commented on GitHub (Jun 19, 2025): 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?
claunia commented 2026-01-29 17:58:36 +00:00
Author
Owner
Copy Link

@albertolg commented on GitHub (Jun 19, 2025):

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?

@albertolg commented on GitHub (Jun 19, 2025): 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](https://github.com/radzenhq/radzen-blazor/issues/url) 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?
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1787
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?