The following CSS increases the height but not the width:
.mat-bottom-sheet-container {
min-height: 100vh;
min-width: 100vw;
margin-top: 80px;
}
Anyone know how to increase the MatBottomSheet width? Stackblitz new window demo.
Note that the demo has to run in a new window (Open in New Window) in order to see that the MatBottomSheet is not full view.
Advertisement
Answer
this is because you have mat-bottom-sheet-container-large applied to the same element which is having css
.mat-bottom-sheet-container-large {
min-width: 512px;
max-width: calc(100vw - 256px);
}
remove this class or add !important property to min-width in your mat-bottom-sheet-container class
.mat-bottom-sheet-container {
min-height: 100vh;
min-width: 100vw !important;
margin-top: 80px;
}