displaying fash message at the bottom

This commit is contained in:
2023-02-12 20:28:18 +01:00
parent 7c34c2ba91
commit 120e032c99
2 changed files with 21 additions and 20 deletions

View File

@@ -4,11 +4,11 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row flex-nowrap"> <div class="row flex-nowrap">
<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark"> <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark">
<sidenav></sidenav> <sidenav class="sticky-top"></sidenav>
</div> </div>
<div class="col py-3"> <div class="col py-3">
<flashmessages></flashmessages>
<router-outlet></router-outlet> <router-outlet></router-outlet>
<flashmessages></flashmessages>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -1,8 +1,9 @@
<ngb-toast <div class="toast-container position-fixed bottom-0 end-0 p-3">
<ngb-toast
*ngFor="let flashmessage of flashmessagesService.toasts" *ngFor="let flashmessage of flashmessagesService.toasts"
[header]="flashmessage.type" [autohide]="true" [delay]="flashmessage.delay || 1500" [header]="flashmessage.type" [autohide]="true" [delay]="flashmessage.delay || 1500"
(hiddden)="flashmessagesService.remove(flashmessage)" (hiddden)="flashmessagesService.remove(flashmessage)"
> >
<ng-container [ngSwitch]="flashmessage.type"> <ng-container [ngSwitch]="flashmessage.type">
<div *ngSwitchCase="'Success'" class="alert alert-success" role="alert"> <div *ngSwitchCase="'Success'" class="alert alert-success" role="alert">
{{flashmessage.body}} {{flashmessage.body}}
@@ -14,5 +15,5 @@
{{flashmessage.body}} {{flashmessage.body}}
</div> </div>
</ng-container> </ng-container>
</ngb-toast> </ngb-toast>
</div>