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
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