Displaying several kendo notifications in quick succession causes diagonal stacking

2 posts, 1 answers
  1. Johnathan
    Johnathan avatar
    3 posts
    Member since:
    Mar 2015

    Posted 07 Oct 2015 Link to this post

    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?

  2. Answer
    Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 09 Oct 2015 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
Back to Top