解决 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() {};
随机推荐
- log4net GetLogger(source).IsInfoEnabled = false
GetLogger(source).IsInfoEnabled = false解决办法 在.net core中需要把log4net.config放到 ITCP.Web\ITCP.Web\obj\Rel ...
- windows常用快捷键和dos命令
windows常用快捷键 Ctrl+C (复制) Ctrl+V (粘贴) Ctrl+S (保存) Ctrl+A (全选) Ctrl+Z (撤销) Alt+F4 (关闭当前窗口) shift+Delet ...
- linux无需root挂载iso镜像文件
引言 起初,我在针对deepin制作一款appimage安装工具,想要其实现的功能就是自动获取图标,只需要输入软件名称和分类即可,当然以后也会寻找方案省去手动输入的麻烦. 后来我发现一个有趣的问题 o ...
- 初学算法之dijkstra
dijkstra的代码思想网上各路高手所述备矣.这里只是存下用邻接矩阵和邻接表实现的dijkstra.(白书代码) 邻接矩阵 1 void dijkstra(int s){ 2 int dis[s]= ...
- IDEA 安装常用操作一
关于IDEA的下载,破解自行百度 一.安装完成的常用设置 SDK选择.编译版本的选择,单项目选择,全局选择 maven配置,单项目,全局配置 二.IDEA如何安装lombok https://www. ...
- CVE-2019-13272:Linux本地内核提权漏洞复现
0x00 简介 2019年07月20日,Linux正式修复了一个本地内核提权漏洞.通过此漏洞,攻击者可将普通权限用户提升为Root权限. 0x01 漏洞概述 当调用PTRACE_TRACEME时,pt ...
- why 2020 you should create a new modern website with web fullstack
why 2020 you should create a new modern website with web fullstack Full-Stack Web Development Front- ...
- 小程序 in action
小程序 in action https://github.com/xgqfrms/xcx-taro taro https://taro-docs.jd.com/taro/docs/README.htm ...
- puppeteer & screenshot
puppeteer & screenshot http://localhost:9812/screenshot?url=https://cdn.xgqfrms.xyz/
- flutter 插件调用callback函数
dart plugin class TestLib { static MethodChannel _channel = const MethodChannel('test_lib') ..setMet ...