Displaying several kendo notifications in quick succession causes diagonal stacking

[Johnathan]

I have a kendo notification like so:

<span id="notification"></span>

var notificationWidget = $("#notification").kendoNotification({
    autoHideAfter: 300000
}).data("kendoNotification");​

 

I then display several notifications in quick succession like so:

notificationWidget.show("foo text", "warning");
notificationWidget.show("foo text", "warning");
notificationWidget.show("foo text", "warning");
notificationWidget.show("foo text", "warning");
notificationWidget.show("foo text", "warning");
notificationWidget.show("foo text", "warning");
notificationWidget.show("foo text", "warning");
notificationWidget.show("foo text", "warning");
notificationWidget.show("foo text", "warning");
notificationWidget.show("foo text", "warning");

 

The kendo widgets are stacked vertically; however, there is an increasing horizontal indentation.  I want all the notifications displayed to be vertically-aligned and maintain their current vertical stacking.  How can I achieve this?

[Dimo]

Hello Johnathan,

Notification popups calculate their position and alignment, depending on several things, one of which is their shadows. When the popups are displayed immediately one after the other, there is no time for the shadow-related adjustment to take place.

If delaying popup displaying is not possible, the only workaround that I can offer is to remove the shadows.

.k-popup.k-notification
{
    box-shadow: none;
}

Another possible alternative is to combine the content of several popup notifications into one popup.


Regards,
Dimo
Telerik