在屏幕调整大小时自动移动 kendo 通知

Question

有人知道如何在调整 window 大小时移动 kendo 通知吗？即当 window 全屏时。

我遇到一个问题，当有人将我的应用程序更改为全屏时，通知覆盖了一些链接，我想避免这种情况。

如有任何帮助和建议，我们将不胜感激。

Answer 1

您可以使用 jQuery 移动它。例如，要使其距右下角 10 个像素，您可以使用此代码：

$(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);
});

请注意，如果您计划同时收到多个通知，您将需要更复杂的代码，否则它们会相互重叠：

//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);
    });
});

在屏幕调整大小时自动移动 kendo 通知

Move kendo notification automatically on screen resize

c#

kendo-ui

asp.net-mvc-5