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 选项框不能显示的问题的更多相关文章

  1. Ant Design框架中不同的组件访问不同的models中的数据

    Ant Design框架中不同的组件访问不同的models中的数据 本文记录了我在使用该框架的时候踩过的坑,方便以后查阅. 一.models绑定 在某个组件(控件或是页面),要想从某个models中获 ...

  2. Ant Design Pro中Transfer穿梭框的实际用法(与后端交互)

    Ant Design Pro中Transfer穿梭框的实际用法(与后端交互) 该控件的属性以及属性的作用在ADP的官方文档中都有介绍,但没有讲如何与后端交互,本文旨在讲解该控件与后端的交互. Ant ...

  3. js进阶 9-11 select选项框如何动态添加和删除元素

    js进阶 9-11 select选项框如何动态添加和删除元素 一.总结 一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...

  4. 在BootStrap的modal中使用Select2搜索框无法输入

    用modal来show一个对话框 dialog.modal({ backdrop:true, keyboard:true, show:true }); 1 2 3 4 5 然后再modal中初始化se ...

  5. 解决Webstom 2017中,输入法候选框无法显示问题

    一.问题: 如题,IDE编辑界面内,输入法的候选框没法显示,有时需要打中文注释,非常麻烦. 原因:IDE自带的OpenJDK与输入法存在冲突 二.解决: (1)在编辑界面,双shift,搜索:swit ...

  6. 解决select2在modal中无法输入的问题

    解决办法: 在js里加一句 $.fn.modal.Constructor.prototype.enforceFocus = function(){};

  7. ant design Modal遮罩层颜色加深 解决方案

    1.原因 页面中存在多个Modal同时渲染及弹出(在table里使用Modal就会出现这种问题) 2.解决方案 不让多个Modal同时渲染就行了,设置Modal的visible属性为this.stat ...

  8. 使用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 ...

  9. 解决select2 在modal中搜索框无效的问题

    $.fn.modal.Constructor.prototype.enforceFocus = function() {};

随机推荐

  1. (数据科学学习手札106)Python+Dash快速web应用开发——回调交互篇(下)

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...

  2. log4net GetLogger(source).IsInfoEnabled = false

    GetLogger(source).IsInfoEnabled = false解决办法 在.net core中需要把log4net.config放到 ITCP.Web\ITCP.Web\obj\Rel ...

  3. 【应急响应】Windows应急响应入门手册

    0x01 应急响应概述   首先我们来了解一下两个概念:应急响应和安全建设,这两者的区别就是应急响应是被动响应.安全建设是主动防御.  所谓有因才有果,既然是被动的,那么我们在应急响应的时候就得先了解 ...

  4. dict与set -- Python

    dict(字典):用空间换取时间,占据空间大,但查询速度快,键值对(key:value),key唯一 d = {'Michael': 95, 'Bob': 75, 'Tracy': 85} 由于一个k ...

  5. Shpfile文件的字段类型说明

    Shpfile文件的字段类型设置如下表所示: 字段类型 字符 字段长度 长整型 N 9 短整型 N 4 浮点型 F 13 双精度 F 19 文本 C 50 特别需要注意的是字段长度,在导出SHP的时候 ...

  6. 1005E1 Median on Segments (Permutations Edition) 【思维+无序数组求中位数】

    题目:戳这里 百度之星初赛原题:戳这里 题意:n个不同的数,求中位数为m的区间有多少个. 解题思路: 此题的中位数就是个数为奇数的数组中,小于m的数和大于m的数一样多,个数为偶数的数组中,小于m的数比 ...

  7. Lightoj 1038 - Race to 1 Again【期望+dp】

    题目:戳这里 题意:一个数字n不断迭代地除以自身的因子得到1.求这个过程中操作除法次数的期望. 解题思路: 求概率基本都是从一个最基础的状态开始延伸推出公式,得出答案.因为每个数都有个共同的最终状态1 ...

  8. nyoj-1236 挑战密室

    挑战密室 时间限制:1 s | 内存限制:128 M 提交 状态 排名 题目描述 R组织的特工Dr. Kong 为了寻找丢失的超体元素,不幸陷入WTO密室.Dr. Kong必须尽快找到解锁密码逃离,否 ...

  9. 从.NET看微软的焦虑

    节日没事,就像聊聊微软的NET. 1.孩子静悄悄,必定在作妖 截止目前,微软的市值达到1.85万亿美元,按说,这样一个宙斯级的巨无霸应该过的非常舒坦, 但是,和微软市值成鲜明的反差,我们从.NET的发 ...

  10. OpenCV+Ubuntu+缺少Python.h

    在cmake时粗心了, 要确保有 -D PYTHON_INCLUDE_DIR=/usr/include/python3.5 且该目录下存在Python.h文件. 如果在错误提示中是python2, 那 ...