Angular ngx- bootstrap - как сделать большой, широкий модальный

Question

Я пытаюсь увеличить размер ngx-модального окна, и мне не очень повезло. Вот что я пытаюсь сделать: при нажатии на что-либо модальное окно должно покрывать область экрана, содержащую сетку. Сетка занимает около 80% всего экрана рабочего стола (в настоящее время для этого приложения нет мобильных планов). Итак, я пытаюсь заставить ngx-modal преобразовать эту область, но .modal-xl идет только так далеко, и я попытался переопределить свойство max-width следующим образом:

div .modal-dialog .modal-xl .modal-dialog-centered {
    max-width: 2500px !important;
    width: 2500px !important;

}

Но, похоже, это не действует. Я также пробовал другие варианты этого, не повезло. Я также попытался добавить класс с полным диалогом и класс с жидкостью для контейнера, но ни один из них, похоже, не смог расширить модальное окно за пределы .modal-xl.

Модальное окно работает и отображается нормально, просто форматирование, которое я пытаюсь выяснить. Возможно ли, чтобы модальное окно занимало такую ​​большую часть экрана с помощью ngx-modal? Если нет, есть ли другие варианты, которые могут это сделать?

Вот html, который я использую для компонента (с жидкостью-контейнером):

<div class="container-fluid">
    <div class="modal-header">
        <div class="modal-body">
            <p>Modal</p>
            <button type="button" class="close" data-dismiss="modal" id="closeModal" (click)="closeModal()">&times;</button>
        </div>
    </div>
    </div>

И вот как модальное окно вызывается из содержащего компонента (из события щелчка):

this.bsModalRef = this.modalService.show(MessageDetailComponent, { class: 'modal-xl modal-dialog-centered', backdrop: 'static' });

Наконец, приложение использует Angular 8.2.14

Спасибо!

ОБНОВЛЕНИЕ:

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

    .container-fluid {
    max-width: 1200px !important;
    width: 1200px !important;
}

.modal-content {
    max-width: 1200px !important;
    width: 1200px !important;
}

.modal-header {
    height: 750px;
    max-width: 1200px !important;
    width: 1200px !important;
}

div .modal-dialog .modal-xl .modal-dialog-centered{
    max-width: 1200px !important;
    width: 1200px !important;
}

Я не совсем уверен, какой ( или несколько) сделали это, но теперь я вижу большой и широкий модальный. Судя по ответу ниже, это может быть модальное содержимое.

Answer 1

DEMO Для компонентов библиотеки, если вы хотите применить css, вам нужно поместить код стиля внутри styles.css код ниже, чтобы повлиять на все модальные окна

.modal-dialog{
  width:100% ;
  height: 100%  ;
  margin: 0 auto;
}
.modal-content{
  width:100% ;
  height: 100%  ;
}

, но если u хотите сделать это только для одного компонента, тогда вам нужно добавить собственный класс в модальный и сделать

.test{
  width:100% ;
  height: 100%  ;
  margin: 0 auto;
}
.test .modal-content{
  width:100% ;
  height: 100%  ;
}