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

2023-04-18 16:10:46

问题描述：

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

如图所示，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内容，而下拉框的渲染其实类似于在某个坐标上贴上一层内容，实际上还是在该容器内，如果不动态把容器撑大，就会被挡住。