From cb6d469e0d3b7371611afb37376fd1c3ec836881 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 27 Mar 2018 17:59:35 +0200 Subject: [PATCH] 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. --- src/lib/bottom-sheet/bottom-sheet-container.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/lib/bottom-sheet/bottom-sheet-container.scss b/src/lib/bottom-sheet/bottom-sheet-container.scss index bcf86afabd7..9165eccde54 100644 --- a/src/lib/bottom-sheet/bottom-sheet-container.scss +++ b/src/lib/bottom-sheet/bottom-sheet-container.scss @@ -17,6 +17,8 @@ $mat-bottom-sheet-container-horizontal-padding: 16px !default; box-sizing: border-box; display: block; outline: 0; + max-height: 80vh; + overflow: auto; @include cdk-high-contrast { outline: 1px solid; @@ -25,12 +27,15 @@ $mat-bottom-sheet-container-horizontal-padding: 16px !default; .mat-bottom-sheet-container-medium { min-width: $_mat-bottom-sheet-width-increment * 6; + max-width: calc(100vw - #{$_mat-bottom-sheet-width-increment * 2}); } .mat-bottom-sheet-container-large { min-width: $_mat-bottom-sheet-width-increment * 8; + max-width: calc(100vw - #{$_mat-bottom-sheet-width-increment * 4}); } .mat-bottom-sheet-container-xlarge { min-width: $_mat-bottom-sheet-width-increment * 9; + max-width: calc(100vw - #{$_mat-bottom-sheet-width-increment * 6}); }