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.

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.

• javascript
• html
• css
• angular
• angular-material

3 Answers 3

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;
}

Better instead of CSS overwriting .mat-bottom-sheet-container, you can use your own custom CSS class for every bottom sheet and pass that class to the MatBottomSheet with the panelClass attribute in the configuration object.

this.myBottomSheet.open(MyComponent, {
  panelClass: 'my-ponent-bottom-sheet'
});

In your global styles you define your custom class:

.my-ponent-bottom-sheet {
  min-height: 100vh;
  min-width: 100vw !important;
  margin-top: 80px;
}

And so you can define separate classes for each bottom sheet.

So for something like this, when you want to edit the size, it's easiest to wrap your bottom sheet ponent in a div, and set the min-width on that - rather than trying to override the outer/parent width.

HTML:

     <div class="bottom-sheet-containter">
        //Bottom sheet content
     </div>

CSS:

    .bottom-sheet-containter {
      min-width: 80vw !important;
    }

I had ran into the same problem but this solution worked perfectly for me.