CODEWITHSUNDEEP
angularbootstrap-4bootstrap-modalng-bootstrap
Exitl0l
Exitl0l

Reputation: 509

ng-boostrap modal w/o fullscreen

I have run into an issue that my modal is always full-screen.

Modal calling btn inside the template:

 <button type="button"
        class="btn btn-danger"
        (click)="openRejectModal(rejectTemplate)">Reject</button>

ng-template at the end of the html:

<ng-template #rejectTemplate>
  <app-reject-modal (close)="closeModal()"
    (send)="sendReject()"></app-reject-modal>
</ng-template>

modal component html:

<div class="modal-container">

  <div class="modal-header">
    <h4 class="modal-title"
      id="modal-basic-title">Profile update</h4>
    <button type="button"
      class="close"
      aria-label="Close"
      (click)="close.emit()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form>
      <div class="form-group">
        <label for="exampleFormControlTextarea1">Example textarea</label>
        <textarea class="form-control"
          id="exampleFormControlTextarea1"></textarea>

      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button"
      class="btn btn-outline-dark"
      (click)="modal.close('Save click')">Save</button>
  </div>
</div>

class="modal-container" is just a custom css for fiddle currently at: (width: 60%, height:60%)

modal opening function:

 openRejectModal(template) {
    this.modalService.open(template, { size: 'lg', backdrop: true });
  }

options object just added but size and backdrop doesn't change a damn thing... :(

I'd like my modal to be as shown in : ng-boostrap documentation

But mine is always full-screen. Whan is the solution to fix this issue?

My modal looks like this atm: Pic

Upvotes: 1

Views: 3335

Answers (1)

wentjun
wentjun

Reputation: 42556

According to the NgBoostrap API documentation, we can pass the windowClass property with a custom class which will be appended to the modal.

Here, on the method that calls the opening of the modal, we will pass the class of custom-modal to the windowClass property:

open(content) {
  this.modalService.open(template, {windowClass : 'custom-modal'})
}

Add the following on your CSS to overwrite the width. You may replace the 400px with any value which you see fit.

.custom-modal .modal-dialog {
  max-width: 400px;
}

You may need to add the above on your global CSS (or, the style.css file that is on the same directory level as your index.html) as it may or may not work if you put it within your component's css.

Upvotes: 3

Related Questions