Kendo Angular Notifications off-center when dismissing notifications of different sizes

Question

I've got a bug when using Kendo UI Angular Notification for toast messaging. My notifications are configured for display in center-bottom, which works great until there are two toast notifications open at the same time with different widths:

If I close the longer toast before the shorter one, the short toast shifts to the left:

As near as I can tell, this is because Kendo is relying on a calculated negative left margin to center the toast container based on the width of the last toast notification added, and it doesn't update that calculation when toasts are dismissed.

MCVE

import { Component, ViewEncapsulation } from '@angular/core';
import { NotificationService, NotificationSettings } from '@progress/kendo-angular-notification';

@Component({
  selector: 'my-app',
  template: `<button (click)="show()">Show Toast</button>`
})
export class AppComponent {
  constructor(
    private notificationService: NotificationService
  ) {}

  public show(): void {
    const options: NotificationSettings = {
      closable: true,
      content: '',
      position: {
        horizontal: 'center',
        vertical: 'bottom',
      },
    };
    this.notificationService.show({
      ...options,
      content: 'First is a short toast',
    });
    this.notificationService.show({
      ...options,
      content: 'Second is a long toast with some extra text to pad it out',
    });
  }
}

Try it on Stackblitz.

Order in which the toasts are displayed does not matter, only the order in which they are dismissed: dismissing the longest first causes the shorter toast(s) to shift left.

Anyone have any ideas on how to fix this?

Answer 1

The problem is indeed like you said. They use the width of the component to calculate the left margin with a number.

To fix this, you can use the following CSS snippet:

.k-notification-group {
    margin-left: 0 !important; // Disables the faulty margin calculation
    transform: translateX(-50%); // Position using percentage of the element's width
}

If you use the appendTo setting of the notification or the cssClass setting, you can use them in the selector to make the CSS fix more localized, if needed (in case you don't want to affect other notifications in the system for instance).