2.7K Star 16K Fork 3.6K

GVPLayui / layui

 / 详情

layer 中弹出的select 上下展示的计算问题

已完成
创建于  
2022-08-23 16:31

说明

  • 版本:2.7.6
  • 描述:select贴近底边时应该向上展示

代码

商品
商品类别
商品编号
商品型号
商品单位
供应商
库房

layer.open({
type: 1
, title :"新增入库内容"
, content: $("#add-goods")
, resize: false
, area: ["660px", "520px"]
, btn: ['确定']
});

补充

在弹出层使用 select, content为页面一个隐藏的dom元素
最下方使用了select,如果弹出层在整个页面中间会向下展开
如果把弹出层拖动至页面底部才会向上展开输入图片说明

输入图片说明

评论 (16)

AAA 创建了任务

这种情况建议不要设置弹层的高度,让其自适应。将 area 改成:

area: "660px"

只写宽度也不行,还是向下展开

要想下拉框向上弹出,需要你这个下拉框的top足够大。所以将窗口拉下去是可行的。你这个情况的话我觉得也可以把下拉框都放在上面。

top肯定是够的,下拉框测试时只放了3个,高度也肯定是够的,出现向下展开应该是计算距离底部距离时不是根据弹出层底部所以导致计算的数值错误产生的.下拉框放到上面倒是个办法,但是不是最好的办法.

我时指的:就是你弹出的那个位置的高度,加上即将弹出的下拉区域的高度要大于窗口高度才有可能网上弹出。你说得不错,计算是根据窗口window的高度,不是弹层的高度。

那个高度也是够的因为我设置的高度只有520px 实际上屏幕的高度有940px 应该是够的

只要弹层下面有足够的空间显示,select 必然是优先向下展开的。
而不设置高度是为了向下展开时不会被弹层本身遮挡。

大佬,正常情况应该是根据弹出层的高度计算是否该向下展开吧,我试过了如果不设置高度也是向下展开,就会出现滚动条,用起来就比较奇怪

@morning-star @AAA
这种情况,除了 Sight 提供的解决方案,还可以在不设置高度的情况(让其自适应),继续对 .layui-layer-content 设置 overflow: visible,如此应该就能以最简单的方式提升 select 展开时的体验了。

示例:https://codepen.io/sentsim/pen/MWQLeyj

特殊需求可以考虑自行实现,下面是一个简单的 demo,可以参考一下。
更多可能出现的边缘情况,需要你自己处理。
演示案例 https://layui-vue.gitee.io/sandbox-vue/?deps=layui

这么做是可以只不过有些麻烦

这种方式确实可以,大佬以后会把这个问题放到后续版本修复么?

这个是距离整个浏览器的底边,正常计算时应该根据弹出层的底边来计算

现在下拉的逻辑就是根据body的距离判断是向上还是向下,如果你想根据弹出层计算,那你弹出层用iframe模式就可以了

一般的情况是可以用iframe的,多写一些代码就可以实现,但是这个功能不同,他不存在后台,数据只是给前端用的,用iframe的话要把所有的数据在打开弹出层时都传递过去就很麻烦.

贤心 添加了
 
常见
标签
贤心 修改了描述
贤心 修改了标题
贤心 任务状态待办的 修改为已完成
贤心 修改了标题

登录 后才可以发表评论

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

搜索帮助