CODEWITHSUNDEEP
c#kendo-uiasp.net-mvc-5
LoftyTowers
LoftyTowers

Reputation: 573

Move kendo notification automatically on screen resize

Does anyone know how to move a kendo notification when a window is resized? i.e. when a window is made full screen.

I have an issue where when someone changes my application to full screen the notifications cover some links and I would like to avoid this.

Any help and advice would be greatly appreciated.

Upvotes: 3

Views: 2275

Answers (1)

Jarosław Kończak
Jarosław Kończak

Reputation: 3407

You can move it using jQuery. For example to keep it 10 pixes from 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);
});

Note that if you are planing to have more than one notification on the time, you will need more complicated code or they will overlap 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);
    });
});

Upvotes: 5

Related Questions