Angular ngx-bootstrap - how to make a big, wide modal

Question

I am trying to oversize the ngx-modal and not having much luck. Here's what I'm trying to do: when something is clicked, a modal should cover the area of the screen containing a grid. The grid takes up about 80% of a full desktop screen (there are no mobile plans for this app at this time). So I'm trying to get the ngx-modal to conver that area, but the .modal-xl only goes so far and I've tried to override the max-width property in the following way:

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

}

But this seems to have no effect. I also tried other variations on this will no luck. I also tried adding a dialog-full class and a container-fluid class, but neither of them seemed able to stretch the modal beyond the .modal-xl limits.

The modal works and displays just fine, it's just the formatting that I'm trying to figure out. Is it possible to have the modal fill up that much of a screen using ngx-modal? If not, are there other options that can do this?

Here is the html I'm using for the component (with container-fluid):

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

And here is how the modal is called from the containing component (from a click event):

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

Lastly, the app is using Angular 8.2.14

Thank you!

UPDATE:

I did get the modal to change size by putting the following into the styles.scss file:

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

I'm not completely sure which one (or multiple) did it, but I now see a big, wide modal. By the look of the answer below, it might be modal-content.

Answer 1

In case someone else sees this, I think there is an easier way to achieve this.

You can define a class as below in your style.scss

.wide-modal-dialog {
  width:100%;
  max-width: 850px;
  margin: 0 auto;
}

.wide-modal-dialog .modal-content{
  width:100% ;
  height: 100%  ;
}

Then, you can inject the class as an option before showing the modal:

const options: ModalOptions = {
      animated: true,
      class: 'wide-modal-dialog',
      initialState: {
        clauseRef: clauseRef
      }
    };
this.bsModalRef = this.modalService.show(ComponentName, options);

This will add the class name specified to the modal base div.