[dev-v5] Fix dialog height for better mobile support#4853
Merged
Conversation
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Contributor
There was a problem hiding this comment.
Pull request overview
Adjusts Fluent UI Blazor dialog layout sizing to make dialog content more usable on mobile by improving grid sizing behavior and tweaking height calculations (including Safari-specific handling).
Changes:
- Updated non-scrollable dialog body grid sizing to use
minmax(0, 1fr)to better support overflow/scroll scenarios. - Added
-webkit-fill-availableandmin-height: 100%height handling for dialog bodies to improve Safari/mobile behavior. - Changed side-positioned dialogs (
position="start"/"end") to useheight/max-height: 100vh.
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 98.7%
|
Collaborator
|
@dvoituron for some reason the dialog changes it's height when you interact with anything in it. trim.959F2D86-2DBA-4E4F-933B-9FDEA4996873.MOV |
Collaborator
Author
I haven't found THE perfect solution. This is a workaround that lets you use Dialog on mobile, but we need to look into it further. |
Collaborator
|
@dvoituron a better approach would be if we remove all heights all together. trim.C4AD4321-1B40-49F3-92EA-6B14473F5B53.MOV |
Collaborator
|
and then handle it via dvh like here: /*
These styles are identical to fluent web components slots.
But we need to duplicated because the "action" and "footer" slots are a single `div` containing the buttons.
*/
/* Dialog -> scrollable = false */
fluent-dialog[fuib] fluent-dialog-body[fuib]:not([scrollable]) {
grid-template-rows: auto 1fr auto;
max-height: 90dvh;
}
fluent-dialog[fuib] fluent-dialog-body[fuib]:not([scrollable])>div[slot="action"] {
display: flex;
gap: var(--spacingVerticalS);
flex-direction: row;
}
/* Dialog -> scrollable = true */
fluent-dialog[fuib] fluent-dialog-body[fuib][scrollable] {
grid-template-rows: min-content minmax(0, 1fr) min-content;
padding: 0;
overflow: hidden;
}
fluent-dialog[fuib] fluent-dialog-body[fuib][scrollable]::part(title) {
padding: var(--spacingVerticalXL) var(--spacingHorizontalXL);
}
fluent-dialog[fuib] fluent-dialog-body[fuib][scrollable]::part(content) {
overflow: auto;
padding: var(--spacingVerticalXL) var(--spacingHorizontalXL);
}
fluent-dialog[fuib] fluent-dialog-body[fuib][scrollable]::part(actions) {
padding: var(--spacingVerticalXL) var(--spacingHorizontalXL);
}
fluent-dialog[fuib] fluent-dialog-body[fuib][scrollable]>div[slot="action"] {
display: flex;
gap: var(--spacingVerticalS);
flex-direction: row;
}
/* Dialog Alignment*/
fluent-dialog[fuib][position="end"]::part(dialog) {
margin-inline: auto 0px;
}
fluent-dialog[fuib][position="start"]::part(dialog) {
margin-inline: 0px auto;
}
/* Drawer -> scrollable = false */
fluent-drawer[fuib] fluent-drawer-body[fuib]:not([scrollable]) {
grid-template-rows: min-content minmax(0, 1fr) min-content;
padding: 0;
overflow: hidden;
width: var(--drawer-width, 100%);
}
fluent-drawer[fuib] fluent-drawer-body[fuib]:not([scrollable])::part(header) {
padding: var(--spacingVerticalXL) var(--spacingHorizontalXL);
}
fluent-drawer[fuib] fluent-drawer-body[fuib]:not([scrollable])::part(content) {
overflow: auto;
padding: 0 var(--spacingHorizontalXL);
}
fluent-drawer[fuib] fluent-drawer-body[fuib]:not([scrollable])::part(footer) {
padding: var(--spacingVerticalXL) var(--spacingHorizontalXL);
}
fluent-drawer[fuib] fluent-drawer-body[fuib]:not([scrollable])>div[slot="footer"] {
display: flex;
justify-content: flex-start;
gap: var(--spacingHorizontalM);
width: 100%;
}
/* Drawer -> scrollable = true */
fluent-drawer[fuib] fluent-drawer-body[fuib][scrollable]::part(content) {
padding: var(--spacingVerticalXL) 0;
}
fluent-drawer[fuib] fluent-drawer-body[fuib][scrollable] {
overflow-y: auto;
width: var(--drawer-width, 100%);
}
fluent-drawer[fuib] fluent-drawer-body[fuib][scrollable]>div[slot="footer"] {
display: flex;
justify-content: flex-start;
gap: var(--spacingHorizontalM);
width: 100%;
}
/* Mobile */
@container (max-width: 479px) {
fluent-dialog-body[fuib]>div[slot="action"] {
flex-direction: column !important;
}
}
@media (max-width: 600px) {
fluent-drawer-body[fuib]>div[slot="footer"] {
flex-direction: column !important;
}
} |
…thub.com/microsoft/fluentui-blazor into users/dvoituron/dev-v5/fix-iphone-dialog
Collaborator
Author
I tried that but when I updated the CSS using your idea... it's better but not yet perfect :-( |
MarvinKlein1508
approved these changes
May 12, 2026
Collaborator
MarvinKlein1508
left a comment
MarvinKlein1508
left a comment
There was a problem hiding this comment.
Works great for me. The only strange thing on mobile is that the buttons will jump down a bit after the dialog has opened
Collaborator
|
Updated to latest commit: trim.77F2ACB9-F7B8-417E-947D-51EF431A1C02.MOV |
vnbaaij
approved these changes
May 12, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
[dev-v5] Fix dialog height for better mobile support
It's not perfect, but the dialog box is “usable” (a scroll is possible).
Need more investigation