Set the width of bottom sheet in Angular Material 2

Question

Can i set the width of bottomsheet in Angular Material 2 (fixed or in percentage) ?

Thanks a lot

Answer 1

Use the panelClass config parameter. For example:

In styles.css: (The global styles file and not the component.css file)

.custom-width {
    width: 450px;
}

In your component.ts:

this.bottomSheet.open(BottomSheetOverviewExampleSheet, {
  panelClass: 'custom-width'
});

https://stackblitz.com/angular/qvokqxjgbrn

Note: Only width in pixels will work.

Answer 2

For those who want to have a full-width bottom sheet like me you can use @Tabrez Ahmed answer and use 100vw instead.

styles.css / styles.scss

.full-width {
  min-width: 100vw !important;
}

component.ts

openBottomSheet(): void {
  this._bottomSheet.open(
    ContactBottomSheet,
    {
      panelClass: 'full-width'
    });
}

Answer 3

Angular Material automatically adds "mat-bottom-sheet-container" class at load time.

You can change width of bottom sheet by below way

Define Min and Max Width you want to change in styles.css: (The global styles file and not the component.css file)

.mat-bottom-sheet-container {
  min-width: 384px;
  max-width: calc(100vw - 128px)
}