Kendo Angular Notification вне центра при отклонении уведомлений разных размеров - PullRequest
Новая
       12

Kendo Angular Notification вне центра при отклонении уведомлений разных размеров

0 голосов
/ 19 июня 2019

У меня ошибка при использовании Kendo UI Angular Notification для обмена тостами.Мои уведомления настроены для отображения по центру внизу, что прекрасно работает до тех пор, пока не откроются два всплывающих уведомления одновременно с различной шириной:

Toasts with different widths

Если я закрою длинный тост перед более коротким, короткий тост сместится влево:

Short toast shifts to the left after the long toast is dismissed

Насколько я могу судить, это потому, чтоKendo полагается на вычисленное отрицательное левое поле для центрирования контейнера тостов на основе ширины последнего добавленного уведомления о тостах и ​​не обновляет этот расчет при отклонении тостов.

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 .

Порядок, в котором отображаются тосты, не имеет значения, только порядок, в котором они распускаются: отклонение самого длинного сначала приводит к укорочению тоста (s) сдвиг влево.

У кого-нибудь есть идеи, как это исправить?

1 Ответ

1 голос
/ 19 июня 2019

Проблема действительно в том, что вы сказали.Они используют ширину компонента для вычисления левого поля с номером.

Чтобы исправить это, вы можете использовать следующий фрагмент 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-локализацию более локализованной, если это необходимо (например, если вы не хотите влиять на другие уведомления в системе).

...