关于Laravel-admin表格自定义操作过多时,当页最后几条的操作栏被遮挡问题解决

需求是表格添加了过多自定义操作,导致点击操作下拉很长的ul,当前页最下面的几条点击操作会因为超出屏幕显示不全。

拿gpt搜了下获取当前点击距页面底端高度方法,再和菜单高度比较,判断是否超出屏幕,给菜单设置top,默认是5px

        Admin::script(
            <<<JS
            $('.grid-dropdown-actions').on('click',function(){
                var dropdownMenuHeight = $('.dropdown-menu').height();
                var screenHeight = window.innerHeight || document.documentElement.clientHeight;
                var clickY = event.clientY;
                var distanceToBottom = screenHeight - clickY - 150;
                if (distanceToBottom < dropdownMenuHeight) {
                    var topValue = dropdownMenuHeight - distanceToBottom;
                    $('.dropdown-menu').css('top', '-'+topValue + 'px');
                } else {
                    $('.dropdown-menu').css('top', '5px');
                }
            });
            JS
        );
本作品采用《CC 协议》,转载必须注明作者和本文链接
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!