This is a migrated thread and some comments may be shown as answers.

Displaying several kendo notifications in quick succession causes diagonal stacking

1 Answer 104 Views
Notification
This is a migrated thread and some comments may be shown as answers.
Johnathan
Top achievements
Rank 1
Johnathan asked on 07 Oct 2015, 07:26 PM

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?

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 09 Oct 2015, 01:07 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Notification
Asked by
Johnathan
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or