如何使ngx-bootstrap模态水平调整大小？

Question

I have a working ngx-bootstrap modal created in angular 5. I wanted to allow user to resize the width of the modal after it is displayed. does any css properties must be included.?

 config = { backdrop: true, ignoreBackdropClick: true }; modalRef: BsModalRef; openModal(template: TemplateRef<any>) { this.modalRef = this.modalService.show(template, this.config); } 

 <ng-template #template style="width:35%;margin-left:105px;margin-top:-4px;background-color: #ffffdd"> <div style="padding-right:-18px"> <button type="button" style="width:25px" class="close pull-right" aria-label="Close" (click)="modalRef.hide()"> <span style="font-size:2.5rem;margin-left:-1%" aria-hidden="true">&times;</span> </button> </div> <br> <div style="text-align: left;padding-left: 5px;background-color: #ffffdd"> <pre> {{data}}</pre> </div> </ng-template> <button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button> 

Wanted to allow user to drag and increase the width of ngx modal

Answer 1

The size of the Bootstrap Modal depends on two classes: 'modal-lg' is for Large Modal and 'modal-sm' is for small modal.

You can use [ngClass] to toggle these classes like this:

<div class="modal-dialog" [ngClass]="bigSize ? 'modal-lg' : 'modal-sm'">

And toggle the bigSize boolean property on a user event, click of a button for eg:

<button (click)="bigSize = !bigSize">Toggle Size</button> 

---

Here's a Working Sample StackBlitz for your ref.

Answer 2

In CSS file need to add below lines

::ng-deep .modal-content{
  width: 800px;
}