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. Incorrect string value: '\xF0\x9F\x93\xB7</...' for column 'content' at row 1

    出现原因:当insert数据中有表情时发生.而这些表情是按照4个字节一个单位进行编码的,而我们使用的utf-8编码在mysql数据库中默认是按照3个字节一个单位进行编码的. 解决方法:将表字段字符集设 ...

  2. 同时拿到BATJMD的Offer是怎样的一种体验?

    写在前面 又到了收割Offer的季节,你准备好了吗?曾经的我,横扫各个大厂的Offer.还是那句话:进大厂临时抱佛脚是肯定不行的,一定要注重平时的总结和积累,多思考,多积累,多总结,多复盘,将工作经历 ...

  3. Django用户注册、登录

    一.用户注册 1 ''' 2 注册的表单模型 3 forms.py 的例子 4 ''' 5 6 from django import forms #表单功能 7 from django.contrib ...

  4. codeforces 1019B The hat 【交互题+二分搜索】

    题目链接:戳这里 学习题解:戳这里

  5. C++ STL (基础)

    STL是什么(STL简介) 本节主要讲述 STL 历史.STL 组件.STL 基本结构以及 STL 编程概述.STL 历史可以追溯到 1972 年 C 语言在 UNIX 计算机上的首次使用.直到 19 ...

  6. SPOJ REPEATS Repeats (后缀数组 + RMQ:子串的最大循环节)题解

    题意: 给定一个串\(s\),\(s\)必有一个最大循环节的连续子串\(ss\),问最大循环次数是多少 思路: 我们可以知道,如果一个长度为\(L\)的子串连续出现了两次及以上,那么必然会存在\(s[ ...

  7. CS144学习(2)TCP协议实现

    Lab1-4 分别是完成一个流重组器,TCP接收端,TCP发送端,TCP连接四个部分,将四个部分组合在一起就是一个完整的TCP端了.之后经过包装就可以进行TCP的接收和发送了. 代码全部在github ...

  8. 2021-2-16:请问你知道分布式设计模式中的Quorum思想么?

    有效个数(Quorum) 有效个数(Quorum)这个设计模式一般是指分布式系统的每一次修改都要在大多数实例上通过来确定修改通过. 问题背景 在一个分布式存储系统中,用户请求会发到一个实例上.通常在一 ...

  9. SCSS variable for loop All In One

    SCSS variable for loop All In One @each $r: red; $g: green; $b: blue; $colors: ( 1: $r, 2: $g, 3: $b ...

  10. Awesome GitHub Topics

    Awesome GitHub Topics freeCodeCamp https://github.com/topics/javascript?o=desc&s=stars https://g ...