Skip to content
Advertisement

Increasing the Width of the MatBottomSheet?

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;
}
User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement