css Question posted in
Some basic documentation can be found here.

Css – NgbModal how to make the modal appear from right to left instead of default top to bottom

I’m using NgbModal and there the Modal is opening from Top to Bottom by default when opening. Is it to possible to make it appear from right to left. I have set up the positioning already such that it is at the right corner of the screen. But cannot figure out the direction of opening

I looked at their API but couldn’t find an option for direction.
https://ng-bootstrap.github.io/#/components/modal/examples

Here is stackblitz of their first example which could be a minimum reproducible example

I also found this answer which uses pure bootstrap and not abstraction like ng bootstrap, so not sure how it can be applied to NgbModal

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Crossclick')"></button>
  </div>
  <div class="modal-body">Modal Content</div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-secondary" (click)="modal.close('Save click')">
      Save
    </button>
  </div>
</ng-template>

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">
  Launch demo modal
</button>

<hr />

<pre>{{ closeResult }}</pre>

  open(content: TemplateRef<any>) {
    this.modalService
      .open(content, {
        ariaLabelledBy: 'modal-basic-title',
        animation: true,
      })
      .result.then(
        (result) => {
          this.closeResult = `Closed with: ${result}`;
        },
        (reason) => {
          this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        }
      );
  }

Help much appreciated

Tags:

2

Answers


  1. 0

    If are only a few modals you want from left to rigth, you can add in your styles.scss (or what-ever styles "global")

    .modal.fade:not(.show) .from-left.modal-dialog {
  transform: translate(-50%,0);
}

    Then, when you open pass the class "form-left"

    this.modalService
  .open(content, {
    ariaLabelledBy: 'modal-basic-title',
    animation: true,
    modalDialogClass:'from-left' //<--this add the class "from-left"
  }).result(...)

    If are all the modal you can use simply

    .modal.fade:not(.show) .modal-dialog {
  transform: translate(-50%,0);
}

    In the stackblitz I add the styles in the own index.html

    Login or Signup to reply.
  2. 0

    You can modify the below CSS to achieve whichever direction transform you want, just mess around with the X and Y values.

    .modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(25px, 0);
}

.modal.show .modal-dialog {
  transform: none;
}

    Stackblitz Demo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search