How to remove the blank space in the component
So I have a toaster component that aligns toasts at the top. When the first toast uses more width than the second one, a blank space is appearing. How do I remove that extra blank space?
Here is the toaster html
toast.html
<div
class="toaster position-fixed top-0 end-0 px-3 py-2"
style="margin-top: 10%"
>
<div *ngFor="let toast of currentToasts; index as i">
<app-toast
[type]="toast.type"
[title]="toast.title"
[message]="toast.message"
[iconType]="toast.iconType"
(disposeEvent)="dispose(i)"
></app-toast>
</div>
</div>
<div
class="toaster position-fixed top-0 end-0 px-3 py-2"
style="margin-top: 10%"
>
<div *ngFor="let toast of currentToasts; index as i">
<app-toast
[type]="toast.type"
[title]="toast.title"
[message]="toast.message"
[iconType]="toast.iconType"
(disposeEvent)="dispose(i)"
></app-toast>
</div>
</div>
<div #toastElement class="toast mt-2 flex-row d-flex w-auto m-0">
<div
class="d-flex justify-content-center align-items-center p-3"
[ngClass]="type"
>
<span class="material-icons">{{ iconType }}</span>
</div>
<div
role="alert"
aria-live="assertive"
aria-atomic="true"
class="p-3"
style="
margin: 0;
color: var(--color-text);
background-color: var(--color-component-select-bg);
"
>
<div
class="d-flex justify-content-between balanced"
style="max-width: 45vw"
>
<strong class="me-auto">{{ title }}</strong>
<button
*ngIf="isDarkTheme === true"
type="button"
class="btn-close btn-close-white"
aria-label="Close"
(click)="hide()"
style="height: 10px"
></button>
<button
*ngIf="isDarkTheme === false"
type="button"
class="btn-close"
aria-label="Close"
(click)="hide()"
style="height: 10px"
></button>
</div>
<div style="max-width: 45vw" class="balanced">
{{ message }}
</div>
</div>
</div>
<div #toastElement class="toast mt-2 flex-row d-flex w-auto m-0">
<div
class="d-flex justify-content-center align-items-center p-3"
[ngClass]="type"
>
<span class="material-icons">{{ iconType }}</span>
</div>
<div
role="alert"
aria-live="assertive"
aria-atomic="true"
class="p-3"
style="
margin: 0;
color: var(--color-text);
background-color: var(--color-component-select-bg);
"
>
<div
class="d-flex justify-content-between balanced"
style="max-width: 45vw"
>
<strong class="me-auto">{{ title }}</strong>
<button
*ngIf="isDarkTheme === true"
type="button"
class="btn-close btn-close-white"
aria-label="Close"
(click)="hide()"
style="height: 10px"
></button>
<button
*ngIf="isDarkTheme === false"
type="button"
class="btn-close"
aria-label="Close"
(click)="hide()"
style="height: 10px"
></button>
</div>
<div style="max-width: 45vw" class="balanced">
{{ message }}
</div>
</div>
</div>
0 Replies