layui下拉框被弹框遮住问题解决、layui下拉框因弹框显示不全解决方案

这篇具有很好参考价值的文章主要介绍了layui下拉框被弹框遮住问题解决、layui下拉框因弹框显示不全解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

导致问题的主要因素是:overflow : auto;改成overflow : visible;

----css自定义样式

    <style>
    body .myskin .layui-layer-content {
        overflow: visible;
        }
    </style>

-----js代码

function addStaff() {
        //$("#formStaff")[0].reset();
        layer.open({
            type: 1,
            area: '700px',
            title: '新增卡号',
            content: $("#formStaff"),
            shade: 0,
            maxmin: false,
            shadeClose: false,
            closeBtn: 1,
            skin: "myskin",//自定义弹框样式
            resize: false,
            btn: ['确定', '取消'],
            yes: function (index, layero) {
            }
        })
    }

----html(弹框部分代码)

 <form class="layui-form" action="" id="formStaff" lay-filter="form-data" style="display: none;">

            <div class="layui-row layui-col-space10">

                <div class="layui-row layui-col-space10">

                    <div class="layui-col-md8 layui-col-xs8">

                        <div class="layui-form-item">

                            <label class="layui-form-label">员工卡号<span style="color:red;"> * </span></label>

                            <div class="layui-input-block">

                                <input type="text" id="cardId" name="cardId" placeholder="请输入卡号" required lay-verify="required|cardId" autocomplete="off" class="layui-input">

                            </div>

                        </div>

                    </div>

                </div>

                <div class="layui-row layui-col-space10">

                    <div class="layui-col-md8 layui-col-xs8">

                        <div class="layui-form-item">

                            <label class="layui-form-label">部门<span style="color:red;"> * </span></label>

                            <div class="layui-input-inline" style="width: 180px;">

                                <div id="deptName" class="xm-select-demo"></div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </form>


 文章来源地址https://www.toymoban.com/news/detail-512560.html

到了这里,关于layui下拉框被弹框遮住问题解决、layui下拉框因弹框显示不全解决方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 解决uni小程序在IOS端input框被软键盘‘挤上去’的问题

    解决uni小程序在IOS端input框被软键盘‘挤上去’的问题

    事先声明!本人前端小白一枚,偶然遇到在ios端input框被遮挡的问题,十分苦恼,也尝试了很多解决办法但都不是很有效,最后在一位大牛的帮助下得到解决,想记录一下分享一下,如果你也遇到可以尝试一样看看! 先复现问题! 我这里是产生问题的环境是uni小程序 并且使

    2024年02月09日
    浏览(9)
  • Layui的layer.confirm弹框用法,很详细

    Layui的layer.confirm弹框用法,很详细

    Layui的弹框的官网示例代码 运行效果是这样的 解释: “纳尼?”就是弹框的内容 “btn”数组中的元素是弹框按钮的内容 标题这里没有填,默认就是“信息” 官网地址: https://layuion.com/docs/modules/layer.html#btn 就将标题改为“操作提示”,效果是这样的 代码如下: 信息框默认

    2024年01月25日
    浏览(10)
  • HBuilderX使用uniapp中的video标签开发视频应用APP,出现视频覆盖<view>图层无法遮住等问题如何解决?

    HBuilderX使用uniapp中的video标签开发视频应用APP,出现视频覆盖<view>图层无法遮住等问题如何解决?

    请使用cover-image或cover-view cover-image | uni-app官网 https://uniapp.dcloud.net.cn/component/cover-image.html#cover-image   cover-view | uni-app官网 https://uniapp.dcloud.net.cn/component/cover-view.html#cover-view 情况1:如上图,注意要使用以下位置才能达到遮住的效果   情况2:如上图,就直接用cover-view自定义一

    2024年02月16日
    浏览(40)
  • layui弹框(上)- 基础参数:弹出层、多按钮、对齐方式、遮罩层(透明度)、定时关闭...的集合

    layui弹框(上)- 基础参数:弹出层、多按钮、对齐方式、遮罩层(透明度)、定时关闭...的集合

    一、使用layui的第一步:引用layui的js和css文件 link rel=\\\"stylesheet\\\" href=\\\"layui/css/layui.css\\\" / script src=\\\"layui/layui.js\\\"/script 您也可以引用网络资源 script src=\\\"layui.js:https://heerey525.github.io/layui-v2.4.3/layui/layui.js\\\"/script link rel=\\\"stylesheet\\\" href=\\\"https://heerey525.github.io/layui-v2.4.3/layui/css/layui.css\\\" 二、引

    2024年02月02日
    浏览(45)
  • layui多选下拉框,多选

    1 先下载xm-select.js,如果layui.js中有就不用了,js中的xmSelect对象在引用xm-select.js后可以直接使用 2 添加多选下拉框标签 3 js上获取下拉数据

    2024年02月11日
    浏览(7)
  • 页面滚动时隐藏element-ui下拉框/时间弹框

    页面滚动时隐藏element-ui下拉框/时间弹框

    场景 在类后台管理的系统中,当(有垂直滚动时)点击下拉框后滚动页面,会发现下拉项会遮盖住 layout 正常页面: 滚动后: 解决 在页面滚动或者缩放时隐藏下拉项即可(借助点击目标元素,下拉项会自动隐藏的特点) 使用

    2024年02月12日
    浏览(13)
  • layui实现地址下拉框模糊查询

    layui实现地址下拉框模糊查询

    注意:千万不要少 lay-search 控制器中 service层

    2024年01月18日
    浏览(6)
  • layui table列表下拉选操作

    layui table列表下拉选操作

        列表中增加下拉选    有的人说样式需要调整,加一个下边这个,不然下拉选打开会显示不出来,我的没有这种情况,大家根据情况使用  数据获取和调用后台接口  原文地址:layui学习——数据表格嵌套下拉列表,并实现动态更新 - 夏末蝉未鸣 - 博客园 我文章里是我的

    2024年02月11日
    浏览(8)
  • MVC+Layui 多选下拉框xmSelect

    MVC+Layui 多选下拉框xmSelect

    1、选择layui拓展第三方组件找到xmselect xmSelect下拉多选 xmSelect - Layui 第三方扩展组件平台 (layuion.com) 下载后放到项目文件中 2、项目引用js文件  script src=\\\"~/Content/dist/xm-select.js\\\"/script 3、html添加表单设置id   div class=\\\"layui-form-item\\\"         label class=\\\"layui-form-label\\\"物料类型:/label

    2024年01月24日
    浏览(10)
  • 微信小程序 - 解决弹框遮罩层的滚动穿透问题

    微信小程序 - 解决弹框遮罩层的滚动穿透问题

    在小程序页面里有自定义弹窗时候,发现弹窗外滚动的时候,底部背景页面也会跟随滚动。面对这个bug,我们可以用下面几种方法实现: 可以实现弹框背景不滚动,但是也会导致弹框自身无法滚动。 如果你的 弹窗本身是不需要滚动的 ,用这个方法是极佳的。 ps:开发工具测

    2024年02月17日
    浏览(214)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包