解决 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() {};
随机推荐
- Codeforces Round #653 (Div. 3) A. Required Remainder (数学)
题意:有三个正整数\(x,y,n\),再\(1\)~\(n\)中找一个最大的数\(k\),使得\(k\ mod\ x=y\). 题解:先记\(tmp=n/x\),再判断\(tmp*x+y\)的值是否大 ...
- Codeforces Round #650 (Div. 3) E. Necklace Assembly (暴力)
题意:有一个字符串,要求使用其中字符构造一个环(不必全部都用),定义一个环是k美的,如果它转\(k\)次仍是原样,现在给你\(k\),要求最长的k美环的长度. 题解:我们首先看\(k\),如果一个环转 ...
- 整体算力提升40% 芯片级安全防护 | 阿里云发布第七代ECS云服务器
2 月 8 日,阿里云宣布推出第七代 ECS 云服务器产品家族,基于最新的神龙架构,相较于上一代整体算力提升 40%,容器部署密度最大可提升 6 倍,是最佳的云原生载体,此外全量搭载安全芯片,实现&q ...
- 鸟哥的linux私房菜——第六章学习(Linux文件与目录管理)
******************第六章学习****************** 1.[文件与目录管理] 在所有目录下面都会存在的两个目录,分别是 "." 与 "..& ...
- 前端接收后端文件流导出excel文档遇到的问题
先上代码: Vue.prototype.download = function(oUrl, filename) { this.axios .get(oUrl, { responseType: 'arr ...
- 恕我直言!!!对于Maven,菜鸟玩dependency,神仙玩plugin
打包是一项神圣.而庄严的工作.package意味着我们离生产已经非常近了.它会把我们之前的大量工作浓缩成为一个.或者多个文件.接下来,运维的同学就可以拿着这些个打包文件在生产上纵横四海了. 这么一项庄 ...
- React Native & Fast Refresh
React Native & Fast Refresh 0.61 https://reactnative.dev/blog/2019/09/18/version-0.61/ Fast Refr ...
- pub package all in one
pub package all in one best practice The pubspec file https://dart.dev/tools/pub/pubspec demo name: ...
- npm install 原理
npm install 原理 https://docs.npmjs.com/about-npm/ npm consists of three distinct components: the webs ...
- Swift 5.1
Swift 5.1 WebView & WKWebView https://developer.apple.com/swift-playgrounds/ https://developer.a ...