layui框架中下拉框被遮挡的问题记录

最新推荐文章于 2023-04-08 16:27:56 发布

梦醒未醒

最新推荐文章于 2023-04-08 16:27:56 发布

阅读量3.8k

点赞数 1

分类专栏： Java #开发问题记录文章标签： html layui dropdown 遮挡 css

本文链接：https://blog.csdn.net/qq_32760475/article/details/103969425

版权

9 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

如图所示，layui在页面渲染时，如果不渲染数据表格的话，会将其上方的下拉框给挡住。因为这个问题遇到很多次，因此记录下来。

下拉框使用的是jq插件dropdown，数据表格及页面渲染都是使用layui。

首先第一步是将dropdown的下拉框高度调长，不再是默认的长度。

.dropdown-main ul {
     max-height: 250px !important;
}

第二步将外部容器设置为根据外部大小变化。

<body style="overflow: auto">
    <div class="content"style="overflow: visible">
        ...
    </div>
</body>

这是因为数据表格如果默认不显示数据的话，外部容器的大小其实只包裹住原html内容，而下拉框的渲染其实类似于在某个坐标上贴上一层内容，实际上还是在该容器内，如果不动态把容器撑大，就会被挡住。

关注