解决 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() {};
随机推荐
- (数据科学学习手札106)Python+Dash快速web应用开发——回调交互篇(下)
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...
- log4net GetLogger(source).IsInfoEnabled = false
GetLogger(source).IsInfoEnabled = false解决办法 在.net core中需要把log4net.config放到 ITCP.Web\ITCP.Web\obj\Rel ...
- 【应急响应】Windows应急响应入门手册
0x01 应急响应概述 首先我们来了解一下两个概念:应急响应和安全建设,这两者的区别就是应急响应是被动响应.安全建设是主动防御. 所谓有因才有果,既然是被动的,那么我们在应急响应的时候就得先了解 ...
- dict与set -- Python
dict(字典):用空间换取时间,占据空间大,但查询速度快,键值对(key:value),key唯一 d = {'Michael': 95, 'Bob': 75, 'Tracy': 85} 由于一个k ...
- Shpfile文件的字段类型说明
Shpfile文件的字段类型设置如下表所示: 字段类型 字符 字段长度 长整型 N 9 短整型 N 4 浮点型 F 13 双精度 F 19 文本 C 50 特别需要注意的是字段长度,在导出SHP的时候 ...
- 1005E1 Median on Segments (Permutations Edition) 【思维+无序数组求中位数】
题目:戳这里 百度之星初赛原题:戳这里 题意:n个不同的数,求中位数为m的区间有多少个. 解题思路: 此题的中位数就是个数为奇数的数组中,小于m的数和大于m的数一样多,个数为偶数的数组中,小于m的数比 ...
- Lightoj 1038 - Race to 1 Again【期望+dp】
题目:戳这里 题意:一个数字n不断迭代地除以自身的因子得到1.求这个过程中操作除法次数的期望. 解题思路: 求概率基本都是从一个最基础的状态开始延伸推出公式,得出答案.因为每个数都有个共同的最终状态1 ...
- nyoj-1236 挑战密室
挑战密室 时间限制:1 s | 内存限制:128 M 提交 状态 排名 题目描述 R组织的特工Dr. Kong 为了寻找丢失的超体元素,不幸陷入WTO密室.Dr. Kong必须尽快找到解锁密码逃离,否 ...
- 从.NET看微软的焦虑
节日没事,就像聊聊微软的NET. 1.孩子静悄悄,必定在作妖 截止目前,微软的市值达到1.85万亿美元,按说,这样一个宙斯级的巨无霸应该过的非常舒坦, 但是,和微软市值成鲜明的反差,我们从.NET的发 ...
- OpenCV+Ubuntu+缺少Python.h
在cmake时粗心了, 要确保有 -D PYTHON_INCLUDE_DIR=/usr/include/python3.5 且该目录下存在Python.h文件. 如果在错误提示中是python2, 那 ...