Skip to content

Commit cb6d469

Browse files
crisbetojosephperrott
authored andcommitted
fix(bottom-sheet): handle overflowing content (#10533)
Implements the `max-width` for the bottom sheet based on the spec and adds a `max-height`, in order for it to handle large amounts of content correctly.
1 parent c469556 commit cb6d469

File tree

1 file changed

+5
-0
lines changed

1 file changed

+5
-0
lines changed

src/lib/bottom-sheet/bottom-sheet-container.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ $mat-bottom-sheet-container-horizontal-padding: 16px !default;
1717
box-sizing: border-box;
1818
display: block;
1919
outline: 0;
20+
max-height: 80vh;
21+
overflow: auto;
2022

2123
@include cdk-high-contrast {
2224
outline: 1px solid;
@@ -25,12 +27,15 @@ $mat-bottom-sheet-container-horizontal-padding: 16px !default;
2527

2628
.mat-bottom-sheet-container-medium {
2729
min-width: $_mat-bottom-sheet-width-increment * 6;
30+
max-width: calc(100vw - #{$_mat-bottom-sheet-width-increment * 2});
2831
}
2932

3033
.mat-bottom-sheet-container-large {
3134
min-width: $_mat-bottom-sheet-width-increment * 8;
35+
max-width: calc(100vw - #{$_mat-bottom-sheet-width-increment * 4});
3236
}
3337

3438
.mat-bottom-sheet-container-xlarge {
3539
min-width: $_mat-bottom-sheet-width-increment * 9;
40+
max-width: calc(100vw - #{$_mat-bottom-sheet-width-increment * 6});
3641
}

0 commit comments

Comments
 (0)