2.7K Star 16K Fork 3.6K

GVPLayui / layui

 / 详情

弹窗内包含select 长度过长 导致显示不佳

已完成
创建于  
2023-05-18 17:30

说明

  • 版本: 2.8.3
  • 描述: 弹出内包含select 长度过长 导致显示不佳,希望可以不被layer层遮挡

代码

// 在此处输入 layer 的任意代码
layer.open({
  type: 1, // page 层类型
  area: ['500px', '300px'],
  title: 'Hello layer',
  shade: 0.6, // 遮罩透明度
  shadeClose: true, // 点击遮罩区域,关闭弹层
  maxmin: true, // 允许全屏最小化
  anim: 0, // 0-6 的动画形式,-1 不开启
  content: '<form class="layui-form" lay-filter="test"><div style="padding: 32px;"><select><option value="">请选择</option<option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="AAA">选项 A</option><option value="BBB">选项 B</option><option value="CCC" selected>选项 C</option></select></div></form>',
  success:function(){layui.form.render();}
});

补充

输入图片说明

评论 (10)

AI东 创建了任务
AI东 修改了标题
AI东 修改了描述
展开全部操作日志

选项过多,选项悬浮框超出弹框部分被遮挡了,试试调整一下z-index层级。

试过了 没用

确实,看了一下是高度的问题,.layui-anim元素的高度必须小于.layui-layer-content元素的高度

估计是没法很好的解决了 只能针对定制一下样式解决

.layui-layer-content   {  
    overflow:visible !important;
}

这样的话选项悬浮框都跑到弹框外边去了,看起来很突兀!

不会 在里边才感觉不好

success: function(layero, index){
  layero.find('.layui-layer-content').css('overflow', 'visible');
}
贤心 添加了
 
常见
标签
贤心 添加了
 
建议
标签
贤心 移除了
 
建议
标签
贤心 添加了
 
精华
标签
AI东 任务状态待办的 修改为已完成

如果使用的是 type 2 这种情况如何解决

那就不要在子页面打开里边打开

如果用 css('overflow', 'visible') 不适用

可以用下面的代码解决

success: (layero, index, that) => {
	//表单渲染
	layui.form.render();

	const locateSelect = (selectWarpElem) => {
		let optionWarpElem = selectWarpElem.find('.layui-anim-upbit');

		const selectItemElem = optionWarpElem.find('.layui-this');
		let top = 0
		if (selectItemElem.length > 0) {
			top = selectItemElem.position().top + selectItemElem.parent().scrollTop() - selectItemElem.height();
		}

		optionWarpElem.scrollTop(top).css({
			'position': 'fixed',
			'left': selectWarpElem.offset().left,
			'top': selectWarpElem.offset().top + selectWarpElem.height()
		});

		optionWarpElem.css({
			'width': selectWarpElem.width(),
			'min-width': 'auto'
		});
	}

	const onSelectWarpElemClick = (selectWarpElem) => {
		//滚动时隐藏,避免位置错乱 只监听一次
		layero.find('.layui-layer-content').one('scroll', () => {
			selectWarpElem.removeClass('layui-form-selected');
		});
		locateSelect(selectWarpElem);
	};

	const deepParentFind = (el, className) => {
		if (el.length < 1) {
			return null;
		}
		if (el.hasClass(className)) {
			return el;
		}
		if (el.hasClass('layui-layer')) {
			return null;
		}
		return deepParentFind(el.parent(), className);
	}

	layero.on('click', (event) => {
		let selectWarpElem = deepParentFind(layero.find(event.target), 'layui-form-selected');
		if (selectWarpElem != null) {
			onSelectWarpElemClick(selectWarpElem);
		}
	});
}

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(4)
347163 lsl1618 1578920825 92529 sentsin 1578917144 3036963 ybyedu 1606698779
JavaScript
1
https://gitee.com/layui/layui.git
git@gitee.com:layui/layui.git
layui
layui
layui

搜索帮助

53164aa7 5694891 3bd8fe86 5694891