Kendo Angular 关闭不同大小的通知时通知偏离中心

Question

我在使用 Kendo UI Angular Notification 进行 toast 消息传递时遇到错误。我的通知配置为在中心底部显示，在同时打开两个宽度不同的 toast 通知之前效果很好：

如果我在关闭较短的 toast 之前关闭较长的 toast，则较短的 toast 会向左移动：

据我所知，这是因为 Kendo 根据最后添加的 toast 通知的宽度，依靠计算出的负左边距使 toast 容器居中，并且它不会更新当祝酒词被取消时的计算。

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',
    });
  }
}

在 Stackblitz 上试用。

toast 的显示顺序无关紧要，重要的是它们被取消的顺序：首先取消最长的 toast 会导致较短的 toast 向左移动。

有人知道如何解决这个问题吗？

Answer 1

问题确实如你所说。他们使用组件的宽度用数字来计算左边距。

要解决此问题，您可以使用以下 CSS 代码段：

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

如果您使用通知的 appendTo 设置或 cssClass 设置，您可以在选择器中使用它们来使 CSS 修复更加本地化，如果需要（在例如，如果您不想影响系统中的其他通知）。

Kendo Angular 关闭不同大小的通知时通知偏离中心

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

toast

kendo-ui-angular2

angular

MCVE