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

DEMO For library components, if you want to effect css , You need to put style code inside styles.css code below effect all modals

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

but if u want to do it only for one component, then you need to add custom class to modal and do

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