Skip to content

Commit

Permalink
fix(material/dialog): dialog actions overlow and are unreachable
Browse files Browse the repository at this point in the history
Fixes a bug in the Angular Material dialog  component where
buttons/actions are unreachable due to dialog overflowing
because of unspecified max-height for the mat-dialog-container
parent flexbox.

Fixes angular#24785
  • Loading branch information
essjay05 committed Jan 5, 2024
1 parent a7f87a8 commit 63fe535
Showing 1 changed file with 5 additions and 0 deletions.
5 changes: 5 additions & 0 deletions src/material/dialog/dialog.scss
Expand Up @@ -10,6 +10,9 @@ $mat-dialog-content-max-height: 65vh !default;
// Dialog button horizontal margin. This has been extracted from MDC as they
// don't expose this value as variable.
$mat-dialog-button-horizontal-margin: 8px !default;
// Dialog container max height. This has been given a default value so the
// flex-children can be calculated and not overflow on smaller screens.
$mat-dialog-container-max-height: 95vh !default;

// Note that we disable fallback declarations, but we don't disable fallback
// values, because there are a lot of internal apps that don't include a proper
Expand All @@ -32,6 +35,8 @@ $mat-dialog-button-horizontal-margin: 8px !default;
// The dialog container is focusable. We remove the default outline shown in browsers.
outline: 0;

max-height: $mat-dialog-container-max-height;

.mdc-dialog__container {
transition-duration: var(--mat-dialog-transition-duration, 0ms);
}
Expand Down

1 comment on commit 63fe535

@essjay05
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before change screenshot (landscape):
image

Before change screenshot (portrait):
image

After change screenshot (landscape):
image

After change screenshot (portrait):
image

Please sign in to comment.