解决 Ant Design Modal 中的 Select 选项框不能显示的问题
antd 的 select 在 modal 里不能显示候选框
代码示例
<a-modal>
<a-select>
<!-- options -->
</a-select>
</a-modal>
问题
当点击 <select> 的时候,发现下拉选项没出现。
分析
事实上是下拉框是出现了,只是被 <a-modal> 遮挡了。
原因是因为 select 的下拉框通过 .ant-select-dropdown 样式给到的 z-index 是 1050,而 modal 自带的样式 .ant-modal-wrap 给的默认 z-index 却是 9998 !!!
解决方案
通过查看官方文档,modal 拥有一个 zIndex 可配置属性,该属性会通过内联样式覆盖 CSS 上的属性,所以只要把这个值设置的小于 1050 就可以了。
PS:文档里写 zIndex 属性的默认值是 1000,可见开发团队考虑过遮挡问题,但使用中依然出现上述问题,所以可能是文档写错了 or 组件库的 bug or 自己用得不对
解决 Ant Design Modal 中的 Select 选项框不能显示的问题的更多相关文章
- Ant Design框架中不同的组件访问不同的models中的数据
Ant Design框架中不同的组件访问不同的models中的数据 本文记录了我在使用该框架的时候踩过的坑,方便以后查阅. 一.models绑定 在某个组件(控件或是页面),要想从某个models中获 ...
- Ant Design Pro中Transfer穿梭框的实际用法(与后端交互)
Ant Design Pro中Transfer穿梭框的实际用法(与后端交互) 该控件的属性以及属性的作用在ADP的官方文档中都有介绍,但没有讲如何与后端交互,本文旨在讲解该控件与后端的交互. Ant ...
- js进阶 9-11 select选项框如何动态添加和删除元素
js进阶 9-11 select选项框如何动态添加和删除元素 一.总结 一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...
- 在BootStrap的modal中使用Select2搜索框无法输入
用modal来show一个对话框 dialog.modal({ backdrop:true, keyboard:true, show:true }); 1 2 3 4 5 然后再modal中初始化se ...
- 解决Webstom 2017中,输入法候选框无法显示问题
一.问题: 如题,IDE编辑界面内,输入法的候选框没法显示,有时需要打中文注释,非常麻烦. 原因:IDE自带的OpenJDK与输入法存在冲突 二.解决: (1)在编辑界面,双shift,搜索:swit ...
- 解决select2在modal中无法输入的问题
解决办法: 在js里加一句 $.fn.modal.Constructor.prototype.enforceFocus = function(){};
- ant design Modal遮罩层颜色加深 解决方案
1.原因 页面中存在多个Modal同时渲染及弹出(在table里使用Modal就会出现这种问题) 2.解决方案 不让多个Modal同时渲染就行了,设置Modal的visible属性为this.stat ...
- 使用ant design组件时,Select设置mode="multiple"或mode="tags"时遇到问题:Uncaught Error: must set key for <rc-animate> children
import {Select} from 'antd'; <Select className={styles.edit_area_dialog_table_select_input_layout ...
- 解决select2 在modal中搜索框无效的问题
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
随机推荐
- 避坑!js正确地使用fill()初始化二维数组
先介绍一下坑 fill()方法都知道,填充数组 比如: let a = new Array(5).fill(0); console.log(a); // 输出结果为[0, 0, 0, 0, 0] 当我 ...
- BIM技术基础-Revit2019建筑
第三章 三维信息建模(中) 3.5 拉伸屋顶的创建 拉伸屋顶→ 在立面中创建,屋顶的形状在垂直截面上一致的 利用参照平面或者已有的墙面或者已有的轴线 3.5.1利用拾取平面创建 画一个参照平面作为屋檐 ...
- CF1400-D. Zigzags
CF1400-D. Zigzags 题意: 给出一个由\(n\)个数字构成的数组\(a\),让你在这个数组中找出有多少个符合以下要求的元组\((i,j,k,l)\): 1. \(i<j<k ...
- Go - 实现项目内链路追踪(二)
上篇文章 Go - 实现项目内链路追踪 分享了,通过 链路 ID 可以将 请求信息.响应信息.调用第三方接口的信息.调试信息.执行的 SQL 信息.执行的 Redis 信息 串起来,记录的具体参数在文 ...
- windows7 更新失败,无法开机处理方法
记录一次今天同事笔记本无法开机的故障处理 windows7系统,安装更新失败,无法开机,卡在配置更新界面 处理方法,强制关机,开机按F8,进入安全模式,安全模式还会卡在配置更新界面,但是卡一会会进入系 ...
- ArcGIS处理栅格数据(一)
一.建立影像金字塔 ArcToolbox--数据管理工具--栅格--栅格属性--构建金字塔(pyramid) 说明:该方式一次只能为一张影像数据建立影像金字塔. ArcToolbox--数据管理工具- ...
- poj-3046 Ant Counting【dp】【母函数】
题目链接:戳这里 题意:有A只蚂蚁,来自T个家族,每个家族有ti只蚂蚁.任取n只蚂蚁(S <= n <= B),求能组成几种集合? 这道题可以用dp或母函数求. 多重集组合数也是由多重背包 ...
- Leetcode(884)-索引处的解码字符串
给定一个编码字符串 S.为了找出解码字符串并将其写入磁带,从编码字符串中每次读取一个字符,并采取以下步骤: 如果所读的字符是字母,则将该字母写在磁带上. 如果所读的字符是数字(例如 d),则整个当前磁 ...
- CVE-2018-8120 提权
经验证,诸多版本的Windows系统均存在该漏洞,文末同时附带一份利用该漏洞制作的提权工具,以供学习.经测试该工具支持Win2003 x32/x64.WinXP x32.Win7 x32/x64, W ...
- 如何在 VSCODE 中高效使用 R 语言
VSCODE 配置 R 一.功能特性展示 之前一直在用 Rstudio 来编写 R,也尝试用过 Pycharm 配置 R 环境. 但是由于现在需求要同时满足 Python,R 和网站要同时开发,为了避 ...