Я пытаюсь создать диалог 100% ширины. Но, как оригинальные настройки, он ограничен до 80vw.

.mat-dialog-container{
  max-width:80vw;
}

Я пробовал следующие способы перезаписать это значение. Но они не увенчались успехом.

.mat-dialog-container {
  max-width: none;
  width: 100vw;
  height: 100vh;
}

А также

.mat-dialog-container {
    max-width: none !important;
}

Кто-то, пожалуйста, посоветуйте мне, как перезаписать 80vw на 100vw. Спасибо.

14
user3099298 4 Сен 2017 в 12:59

5 ответов

Лучший ответ

Добавьте класс CSS в свой глобальный styles.css, например

.full-width-dialog .mat-dialog-container {
  max-width: 100vw !important;
}

.. затем предоставьте panelClass вашему диалогу:

this.dialog.open(MyDialogComponent, {panelClass: 'full-width-dialog'})

Прочтите эту документацию.

22
Frederik Struck-Schøning 23 Июл 2018 в 23:00

Попробуйте использовать имя свойства напрямую, как показано ниже:

this.dialog.open(MyDialogComponent, {maxWidth: '100vw !important'});

Это работает для меня в Angular 7.

13
Grzegorz Kawalec 28 Дек 2018 в 08:49

Я предпочитаю устанавливать вещи в css, тогда я могу использовать разные настройки для адаптивного дизайна.

Я обнаружил, что вынужден использовать !important, чтобы обойти стандартные 90vw.

Оказывается, если вы поставите maxWidth: undefined, он этого не сделает.

dialog.open(DialogChoicesComponent, { ...options, maxWidth: undefined });

Что касается настройки CSS, это совсем другая тема, но вы можете установить backdropClass и panelClass и стилизовать их по своему желанию.

0
Simon_Weaver 5 Авг 2019 в 06:30

Вы используете дизайн материала и пытаетесь переопределить класс по умолчанию? Вам нужно использовать более конкретное правило CSS. Выберите это для родительского элемента и попробуйте, !important также может быть полезным.

-1
Vishal Gulati 4 Сен 2017 в 10:02

Самый простой способ решить это:

const dialogRef = this.dialog.open(MyDialogComponent, {
        width: '100vw',
        maxWidth: '100vw',
    }
)
7
Junior Gantin 2 Май 2020 в 19:03