I need help with resizing the ngx-modal to cover a large area of the screen. Currently, I am trying to make it so that when something is clicked, the modal should overlay an 80% width grid on a full desktop screen. Despite my attempts at using .modal-xl and overriding max-width properties, the modal does not expand as desired:
div .modal-dialog .modal-xl .modal-dialog-centered {
max-width: 2500px !important;
width: 2500px !important;
}
Unfortunately, these adjustments have not been effective. I also experimented with adding classes like dialog-full and container-fluid, but they did not stretch the modal beyond the limits of .modal-xl.
The functionality of the modal itself works perfectly fine; however, I am struggling with the visual formatting. Is there a way to make the ngx-modal fill up such a large portion of the screen? If not, are there alternative solutions available?
Here is how the component's HTML looks (including 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()">×</button>
</div>
</div>
</div>
Below is how the modal is triggered from the parent component (on a click event):
this.bsModalRef = this.modalService.show(MessageDetailComponent, { class: 'modal-xl modal-dialog-centered', backdrop: 'static' });
As a note, the application is running Angular 8.2.14
UPDATE:
To successfully resize the modal, I added the following styles in 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;
}
It is unclear which specific style change resolved the issue, but now the modal displays as intended - large and wide. Based on the explanation provided below, it appears that updating the modal-content may have contributed to the successful resize.