Kendo notification auto change on screen resize
Does anyone know how to move the kendo notification when the window is resized? that is, when the window is done in full screen mode.
I have a problem when someone changes my app to full screen, notifications cover some links and I would like to avoid this.
Any help and advice is greatly appreciated.
+3
source to share
1 answer
You can move it with jQuery. For example, to keep 10px in the bottom right corner, you can use this code:
$(window).on('resize', function(e){
var notificationContainer = $(".k-notification").parent();
notificationContainer.css('top', $(window).height() - notificationContainer.outerHeight() - 10);
notificationContainer.css('left', $(window).width() - notificationContainer.outerWidth() - 10);
});
Please note that if you plan to have multiple notifications in time, you will need more complex code or they will overlap with each other:
//move all notfication starting 10px from bottom right corner
$(window).on('resize', function(e){
var notifications = $(".k-notification");
var maxTop = 0, lastElement;
notifications.each(function(index, value){
var thisPosition = $(value).parent().position();
if(thisPosition.top > maxTop){
maxTop = thisPosition.top;
lastElement = $(value).parent();
}
});
var newTop = $(window).height() - lastElement.outerHeight() - 10;
var topChange = maxTop - newTop;
notifications.each(function(index, value){
var notificationContainer = $(value).parent();
notificationContainer.css('top', notificationContainer.position().top - topChange);
notificationContainer.css('left', $(window).width() - notificationContainer.outerWidth() - 10);
});
});
+4
source to share