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. centos 7下设置.net core项目开机自启动

    1.在etc/systemd/system下创建xxx.service文件 例如:vi /etc/systemd/system/ubif.service2.编辑 ubif.service内容如下: [ ...

  2. WPF 只读集合在 XAML 中的绑定(WPF:Binding for readonly collection in xaml)

    问题背景 某一天,我想做一个签到打卡的日历.基于 Calendar,想实现这个目标,于是找到了它的 SelectedDates 属性,用于标记签到过的日期. 问题来了. 基于MVVM模式,想将其在xa ...

  3. word2vector论文笔记

    背景 很多当前的NLP系统和技术都把单词像ont-hot一样当做原子性的一个概念去对待,单纯就是一个索引,无法表示词之间的相似性.原因就是往往一个简单的.鲁棒的.可观测的模型在海量数据集上的学习效果要 ...

  4. hdu 5874

    On an isolated island, lived some dwarves. A king (not a dwarf) ruled the island and the seas nearby ...

  5. 51nod 1073约瑟夫环 递归公式法

    约瑟夫环问题的原来描述为,设有编号为1,2,--,n的n(n>0)个人围成一个圈,从第1个人开始报数,报到m时停止报数,报m的人出圈,再从他的下一个人起重新报数,报到m时停止报数,报m的出圈,- ...

  6. linux 必备 学习 资源 汇总 大全!

    Linux https://www.linux.com/ https://youtu.be/CE4WeUNFX2g https://www.youtube.com/watch?v=JzsLkbwi1L ...

  7. git branch All In One

    git branch All In One Git Branch Management https://git-scm.com/book/en/v2/Git-Branching-Branch-Mana ...

  8. Apple 产品反人类的设计 All In One

    Apple 产品反人类的设计 All In One 用户体验 shit rank WTF rank iPhone 更换铃声 WTF, 这么简单的一个功能搞得太复杂了 使用要下载 1.6 G的库乐队 A ...

  9. how to tell a function arguments length in js

    how to tell a function arguments length in js JavaScript函数不对参数值(参数)执行任何检查 https://www.w3schools.com/ ...

  10. Vue & mobile UI components

    Vue & mobile UI components https://github.com/vuejs/awesome-vue https://awesome-vue.js.org/ http ...