The following CSS increases the height but not the width:
JavaScript
x
6
1
.mat-bottom-sheet-container {
2
min-height: 100vh;
3
min-width: 100vw;
4
margin-top: 80px;
5
}
6
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
JavaScript
1
5
1
.mat-bottom-sheet-container-large {
2
min-width: 512px;
3
max-width: calc(100vw - 256px);
4
}
5
remove this class or add !important property to min-width
in your mat-bottom-sheet-container
class
JavaScript
1
6
1
.mat-bottom-sheet-container {
2
min-height: 100vh;
3
min-width: 100vw !important;
4
margin-top: 80px;
5
}
6