Unplanned
Last Updated: 20 Nov 2025 08:29 by Richard
Created by: Richard
Comments: 0
Category: Notification
Type: Bug Report
2

Bug report

When a Notification is rendered on the same page as popups (Window, Dialog, etc), it is displayed behind the popup.

Reproduction of the problem

  1. Open the Dojo examples - https://dojo.telerik.com/rvoPVbqK and https://dojo.telerik.com/mXdTrXpa

Current behavior

Notification is displayed behind the popups.

Expected/desired behavior

The Notification should be displayed on top of the popups

Workaround

 $('.k-notification').parents('.k-animation-container').css('z-index', 12500)

Dojo - https://dojo.telerik.com/TnVHKzQc

The issue is a regression starting with 2025.4.1111 version.

Environment

  • Kendo UI version: 2025.4.1111
  • Browser: [all ]
Unplanned
Last Updated: 08 Feb 2024 13:28 by ADMIN
Created by: Gerard
Comments: 2
Category: Notification
Type: Feature Request
1

At present, popup notifications stay in one place on the screen and if you resize the browser while there is a visible notification, it will no longer be in the expected corner of the viewport (e.g., the bottom right) - they may be somewhere around the middle or outside of the visible viewport.

The following article shows how you can reposition them with your own by calculating the new position rules: https://docs.telerik.com/kendo-ui/controls/layout/notification/how-to/move-on-window-resize.

An alternative that may be simpler is to use your own container with fixed positioning and use inline notifications in it, instead of popup notifications. With this this, you can define such a fixed position on your div that satisfies the layout and the notifications will add content to it. An example is available in the following article: https://docs.telerik.com/kendo-ui/controls/layout/notification/how-to/move-on-notification-hide.

Ideally, this feature will be built-in behind a property that will have the notification attach a handler to window.resize and will reposition the popupts automatically, maybe with a configurable delay (that is, how often after resizing the code should run). Perhaps a property like "resizeRepositionTimeout: number" can be used for both - if unset, it will default to undefined and no repositioning will occur, if set to a number, it will be used to throttle the resize event.