当忽略不同大小的通知时，Kendo角度通知偏离中心
当忽略不同大小的通知时，Kendo角度通知偏离中心
提问于 2019-06-19 07:31:42
在使用Kendo UI Angular Notification发送吐司消息时，我遇到了一个错误。我的通知被配置为在中间-底部显示，这非常有效，直到同时打开两个宽度不同的吐司通知：
如果我在较短的吐司之前关闭较长的吐司，则较短的吐司将移动到左侧：
据我所知，这是因为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上试试吧。
吐司的显示顺序并不重要，重要的是它们被删除的顺序:首先取消最长的吐司会导致较短的吐司左移。
有没有人有办法解决这个问题？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-19 20:55:55
问题确实像你说的那样。它们使用组件的宽度来计算带有数字的左边距。
要解决此问题，可以使用以下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修复更加本地化(例如，如果您不想影响系统中的其他通知)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56658302
复制相关文章
相似问题
腾讯云开发者
