select2搜索框被弹出层遮挡问题

最新推荐文章于 2023-05-10 20:32:29 发布
最新推荐文章于 2023-05-10 20:32:29 发布
阅读量1.3k 收藏 2
点赞数 1
分类专栏： css html jquery 文章标签： javascript css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wxx_0124/article/details/121837814
版权
html 同时被 3 个专栏收录
13 篇文章 0 订阅
订阅专栏
jquery
7 篇文章 0 订阅
订阅专栏
css
2 篇文章 0 订阅
订阅专栏

先放解决方法：

.select2-container--open .select2-dropdown{left:0;z-index:999999999;}

只需添加一个样式即可

原理大概就是跟图层有关，具体请自行去select2和弹出层插件官网了解。

我用的是layer.open和dialog弹窗插件，均能解决。

并不保证能解决你们的问题，仅供参考，不喜勿喷。

转自：Layer弹窗和 jquery select2 兼容问题【附源码】_wx5bffdbaf11b62_51CTO博客

一只很酸de橘子
关注
专栏目录
【Python】高效的Web自动化测试利器—Python+Playwright快速上手自动化实战指南
墩墩分墩
08-16 1569
**Playwright是微软在` 2020 年初 `开源自动化测试工具，功能和 selenium 类似，都可以驱动浏览器进行各种自动化操作。** - 支持主流浏览器，如Chrome、Firefox、Safari 等，同时支持以**无头模式、有头模式**运行，并提供了**同步、异步的 API**，可以结合 `主流测试框架`使用，并且支持浏览器端的自动化脚本录制等功能。 **特点：** - 跨浏览器：Playwright 支持所有现代渲染引擎，包括Chromium、WebKit 和 Firefox； - 跨
基于STM32+Qt上位机设计的智慧停车场管理系统(207)
最新发布
08-14 477
本项目设计了一套基于STM32+Qt上位机的智慧停车场管理系统。该系统融合了先进的嵌入式技术、图像识别技术、数据库技术和移动互联网技术，通过STM32硬件端实时采集车库现场信息，包括车牌识别、车位占用状态监测等，并将数据上传至Qt上位机进行处理与展示。利用MySQL数据库存储车辆出入库记录及车位使用情况，确保数据的安全性和可追溯性；通过Android手机APP为用户提供查询、支付等功能，实现远程交互与便捷服务。
select2弹出层layer等冲突
cdf0701的博客
03-21 1662
select2和layer冲突 主要有几种方式： 1、修改layer默认z-index 2、select2加入参数dropdownParent: layero 3、修改select2-container–open的z-index大于layer
layui layer select 选择被遮挡的解决方法
01-21
在编程的时候, layer弹窗中的select 经常会遇到被遮挡的情况： 解决方法：在页面里面找到对应div的class 给overflow新的属性visible即可(默认值。内容不会被修剪，会呈现在元素框之外。)即可显示出下拉框 1.找到层1 的overflow 属性, 修改成为visible. 2. 如果有层2, 就把层2的也设置一下, 就完美解决了!!! 示例: 下面是一些示例： $(“.layui-table-body”).css(‘overflow’,’visible’); $(“.layui-table-box”).css(‘overflow’,’visible’); $(“.
layer和select2一起使用，导致select2下拉框无法显示的问题
chouzizi的博客
02-12 6876
今天使用layer插件做的弹出框中，使用了select2插件，但是select2插件的下拉框无法正常显示，很显然这是由于layer弹出层z-index值比较大，导致了select2的下拉框被遮住了。解决这个的方法一般就是增大select2下拉框的z-index值，或者减小layer的弹出框的值。虽然可以使用直接修改源码的方式去修改这个值，但是一般不建议这么做，因为这么做很可能会导致其他无法预料的问...
弹出层layer中的select2问题
请叫我小明 （坐标：西安）
05-10 286
最好的办法，不要在页面加载时初始化select2；在功能和美化之间，需要权衡；
select2部分文字的遮挡
qq_26430717的博客
12-24 221
select2,部分文字的遮挡，没有居中的问题。控制边界margin-top: 0px 。
element-ui 两层dialog，第二层dialog里面的el-select下拉选项被遮盖住了
jingzhuo3185的博客
06-09 5402
element-ui 两层dialog，第二层dialog里面的el-select下拉选项被遮盖住了 问题描述：在同一个页面内，弹出两个dialog，第二个dialog在第一个dialog上方。第二个dialog里面是个form表单，表单里的el-select组件下拉选项被遮盖住了。 解决思路：下拉框z-index层级太低，所以需要修改下拉框的z-index。 但是直接在el-select添加样式，是不会对下拉框有影响的，还好我们在element-ui官网看到el-select 有popper-clas
前端面试问题（适用于面试回答思路）
yaminne的博客
03-28 4980
原型和原型链 原型：构造函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型。也即，每个构造函数的实例都有一个原型，叫原型对象，由实例对象的内置属性_proto_指向。每个原型都有一个 constructor 属性指向关联的构造函数。 原型用法：构造函数创建的实例可以访问实例的属性和方法，也可以访问原型的属性和方法。对于原型只能访问自己的属性和方法。考虑这一特性，如果对象公有的属性和方法，我们可以添加到原型上面，对象需要的时候直接访问原型的属性和方法就可以。 当读取实
移动端开发遇到的问题及解决方式
ygkyufcl的博客
03-03 1046
1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题? 首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案是： (1) 看是否能把body和html的height: 100%去除掉。 (2) 在滚动的容器中增加：-webkit-overflow-scrolling: touch或者给body增加：body...
layui: layer.open加载窗体时出现遮罩层的解决方法
10-16
今天小编就为大家分享一篇layui: layer.open加载窗体时出现遮罩层的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决layer弹层遮罩挡住窗体的问题
12-10
使用代码： <div> <div>这里面某个按钮触发弹层<div> <div id='dialog' hidden='hidden'></div> </div> 如果上面的按钮触发了弹层 layer.open 且content是某个DOM元素 content:$('#dialog') 那么这里弹出层，遮罩会遮住到弹窗导致操作不了。 官网给出的说法是 如果弹层的内容content是某个DOM元素的话，要放在body的根节点下。不能放在div里面了。 我看了html代码，最后生成的遮罩DOM元素的位置是body的子级，所以知道弹层的DOM要和遮罩的DOM 要在同一层。 所以这里再弹
四、数据展示组件(2)
rocktanga的博客
11-15 1405
12、Tree树形控件 多层次的结构列表。 何时使用：文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用 树控件 可以完整展现其中的层级关系，并具有展开收起选择等交互功能。 (0)<Tree>组件对应的事件 <1>onCheck事件: 表示选中复选框，或者取消复选框的选中时触发.可选值：无；默认值： -；类型： function(checkedKeys, info:{checked: boolean, checkedNodes, node
技术解决2——导航下拉菜单被select框遮盖问题
weixin_30635053的博客
12-24 468
导航的下拉菜单被靠近导航的select框遮住了，这个情况只在IE6情况下发生，属于IE6的一个缺陷，先不管多么痛恨IE的种种不是吧，现在网上比较流行的方法目前大致有三种： 1.点击下拉菜单隐藏select //我觉得这个方法不太实用 2.把下拉菜单放在iframe元素上面 3.JavaScript模拟一个select菜单 不使用系统默认的select //我感觉这个操作起来比较麻烦，...
select2下拉框在modal弹框下输入框不显示，官方解决办法：设置dropdownParent。
大路的博客
08-08 4212
采用select2控件，在bootstrap的modal弹框中，会出现下拉框中没有输入框。网上走一圈，基本上解决办法都是2个，但我要说的是：这2个方法都不是最好的。因为官方就有解决方案，而且非常简单。网上的常用2个解决方案： 1、检查modal模态窗口中的div中是否有tabindex=”-1”，有则删除tabindex=”-1”； 2、在JS文件中全局加上：$.fn.modal.Constr...
layui弹窗下的下拉选择框被遮挡或显示不全
EastChilde的博客
05-31 6348
//单个使用 layer.open({ skin: 'to-fix-select' //其他参数省略 }); //CSS body .to-fix-select .layui-layer-content {overflow: visible;}
layui 弹出层嵌入tinyMce的菜单被遮挡的解决办法
qq_45846592的博客
03-27 449
我挨个尝试过，发现如下属性这样设置有效，因为19891022是layui弹出层的默认堆叠，所以只需要对这个类名的z-index设置大于它19891022的值就行。虽然都3202年了还在使用layui写后台是有点过时了，但是layui确实好用，在使用过程中也不可避免的碰到了如下图的问题。如图，本应该在弹出层上方出现的插入图片窗口被弹出层遮挡，查阅了其他同问题文章的解决方案无非是将。当然可能是因为我使用的tinyMce版本过老，才导致其他人的方法无效，所以写此文仅做纪念。
解决 select2 zindex 遮罩层问题 、 select2 点击无反应 ，下拉框不能正常展示问题
qq_28917403的博客
08-01 3304
加入下列样式就可解决 <style> /*select2在layui的modal中默认被遮盖，现在强制显示在最前*/ .select2-drop { z-index: 1005000 !important; } .select2-search-choice-close { margin-top: 0 !importa...
layui弹出层select显示不全
10-09
您可以尝试使用 layui 的弹出层的 area 参数来调整弹出层的大小，以确保 select 控件完全显示。area 参数是一个数组，可以设置弹出层的宽度和高度。例如，您可以尝试设置一个较大的高度值，让 select 控件在弹出层中完全显示。 示例代码如下： ``` layer.open({ type: 1, title: '弹出层', area: ['500px', '400px'], // 设置宽度为500px，高度为400px content: $('#popup-container') }); ``` 您可以根据实际情况调整宽度和高度的数值，以适应您的页面布局。 希望能帮到您！如果您有其他问题，请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值