关于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 协议》,转载必须注明作者和本文链接
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

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