Увеличение ширины MatBottomSheet?

Question

Следующий CSS увеличивает высоту, но не ширину:

.mat-bottom-sheet-container {
  min-height: 100vh;
  min-width: 100vw;
  margin-top: 80px;
}

Кто-нибудь знает, как увеличить MatBottomSheet ширину? Демонстрация нового окна Stackblitz.

Обратите внимание, что демонстрация должна запускаться в новом окне (Открыть в новом окне), чтобы увидеть, что MatBottomSheet не является полным представлением.

Answer 1

это потому, что вы применили mat-bottom-sheet-container-large к тому же элементу, для которого css

.mat-bottom-sheet-container-large {
     min-width: 512px;
     max-width: calc(100vw - 256px); 
}

удалите этот класс или добавьте! Важное свойство к min-width в вашем mat-bottom-sheet-container классе

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

Answer 2

Лучше вместо перезаписи CSS .mat-bottom-sheet-container, вы можете использовать свой собственный класс CSS для каждого нижнего листа и передать этот класс в MatBottomSheet с атрибутом panelClass в объекте конфигурации.

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

В вашем глобальном styles вы определяете свой пользовательский класс:

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

И поэтому вы можете определять отдельные классы для каждого нижнего листа.