CODEWITHSUNDEEP
angularngx-bootstrap
Vinayk94
Vinayk94

Reputation: 1

How to make ngx-bootstrap modal resize horizontally?

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

Upvotes: 0

Views: 3927

Answers (2)

S.Sarkar
S.Sarkar

Reputation: 59

In CSS file need to add below lines

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

Upvotes: 0

SiddAjmera
SiddAjmera

Reputation: 39462

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.

Upvotes: 1

Related Questions