Antd中使用Select框 在点出弹出下拉列表后 鼠标移到外面滚动会导致下拉框位置偏移

今天使用Select框的时候  由于页面可以滚动  出现了  在点出弹出下拉列表后 鼠标移到外面滚动会导致下拉框位置偏移的bug

如图  上下滚动外部页面会导致下拉框偏移

解决方案:

Antd  官方文档

文档中Select框有一个元素 getPopupContainer

 并且有一行小字提示

注意,如果发现下拉菜单跟随页面滚动,或者需要在其他弹层中触发 Select,请尝试使用 getPopupContainer={triggerNode => triggerNode.parentElement} 将下拉弹层渲染节点固定在触发器的父元素中。

在原有代码中加入  
getPopupContainer={triggerNode => triggerNode.parentElement}

完整代码

<Form.Item label="病历标准">
  {getFieldDecorator('characteristicJG', {
  })
    (<Select style={{ width: '100%' }}
      onChange={this.characteristicChangeJG}
      mode="multiple"
      placeholder="请选择病历标准"
      getPopupContainer={(triggerNode:any)=>{
        return triggerNode.parentElement 
      }}
    >
      {characteristic_JG_list.map((item: any, index: any) => {
        return <Option key={item} value={item}>{item}</Option>
      })}
    </Select>)
  }

页面重新滑动,不会出现下拉框偏移问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/362528.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用goland IDE编写go windows ui

最近突发奇想&#xff0c;想实现一款工作节奏的提示安排小闹钟。那首先解决的就是UI。本人擅长go语言。那go在windows ui的探索肯定有人做过了吧。一查还真有&#xff0c;通过知乎&#xff0c;csdn等查到目前支持最好的就是walk库了。那走起试试。 一、拷贝go代码 将官网例子…

miniReact<一>

一、工程化配置 1.1 目录结构 1.1.1 Multi-repo VS Mono-repo Multi-repo 每个库有自己独立的仓库&#xff0c;逻辑清晰&#xff0c;协同管理复杂 Mono-repo 很方便管理不同独立的库的生命周期&#xff0c;会有更高的操作复杂度 项目有很多包&#xff0c;同时管理多个不同的…

Java技术栈 —— Spring MVC 与 Spring Boot

参考文章或视频链接[1] Spring vs. Spring Boot vs. Spring MVC[2] Key Differences Between Spring vs Spring Boot vs Spring MVC

如何给图片压缩大小?3种方法任你选择!

如何给图片压缩大小&#xff1f;在日常生活中&#xff0c;将图片压缩可以带来很多便利。首先&#xff0c;对于需要在网络上分享或传输的图片&#xff0c;压缩可以大大减少文件大小&#xff0c;加快上传和下载速度。其次&#xff0c;还可以帮助他们节省空间&#xff0c;存放更多…

Flex布局,几行代码就可以实现瀑布流布局,代码简单,定制化强。

原理很简单&#xff0c;计算图片的宽高&#xff0c;再计算每列的使用高度&#xff0c;然后再将当前图片放置在列高最小的一列。其实这种方式使用什么方式布局都无所谓&#xff0c;我使用的是flexd布局。Flex的使用在这里就不讲解了&#xff0c;网上的教程一大堆。这里讲解使用V…

数据治理到底是什么?为什么要做数据治理?

数据治理的两个目标&#xff1a;一个是提质量&#xff0c;一个是控安全。通过业务流程优化&#xff0c;规范数据从产生、处理、使用到销毁的整个生命周期&#xff0c;使得数据在各阶段、各流程环节安全可控&#xff0c;合规使用。 数据治理治的是“数据”吗&#xff1f; 数据是…

springboot与springcloud之间的版本对应关系

https://start.spring.io/actuator/info 当然&#xff0c;你可以直接在&#xff1a; https://spring.io/projects/spring-cloud 上看文档查询&#xff0c; 不过&#xff0c;最后应该是调到这里的&#xff1a; https://github.com/spring-cloud/spring-cloud-release/wiki/Suppo…

2024年【中级消防设施操作员(考前冲刺)】找解析及中级消防设施操作员(考前冲刺)考试总结

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年中级消防设施操作员&#xff08;考前冲刺&#xff09;找解析为正在备考中级消防设施操作员&#xff08;考前冲刺&#xff09;操作证的学员准备的理论考试专题&#xff0c;每个月更新的中级消防设施操作员&#…

git clone常见问题一览及解决方法

在使用Ubuntu下&#xff0c;终端运行git clone命令时会遇见许多问题&#xff0c;本文主要针对一些常见的问题进行整理。关于换源问题&#xff0c;推荐使用小鱼的一键换源。 1.git clone 速度过慢 1.1 魔法 这个方法不做过多赘述&#xff0c;ubuntu下个人使用发现体验良好&am…

国外知名的农业机器人公司

从高科技温室到云播种&#xff0c;农业机器人如何帮助农民填补劳动力短缺以及超市货架的短缺。 概要 “高科技农业”并不矛盾。当代农业经营更像是硅谷&#xff0c;而不是美国哥特式&#xff0c;拥有控制灌溉的应用程序、驾驶拖拉机的 GPS 系统和监控牲畜的带有 RFID 芯片的耳…

Kotlin 协程1:深入理解withContext

Kotlin 协程1&#xff1a;深入理解withContext 引言 在现代编程中&#xff0c;异步编程已经变得非常重要。在 Kotlin 中&#xff0c;协程提供了一种优雅和高效的方式来处理异步编程和并发。在这篇文章中&#xff0c;我们将深入探讨 Kotlin 协程中的一个重要函数&#xff1a;wi…

中科院国际预警期刊名单发布一周年,共8本期刊被剔除!

据官方消息称&#xff1a;2024年中科院《国际期刊预警名单》将于2024年1月更新&#xff0c;今天已经是2月1号了&#xff0c;距离去年的2023年版《国际期刊预警名单&#xff08;试行&#xff09;》发布已经一周年&#xff0c;在去年被列入预警名单的28本期刊中&#xff0c;截止目…

FPGA高端项目:Xilinx Artix7系列FPGA 多路视频缩放拼接 工程解决方案 提供4套工程源码+技术支持

目录 1、前言版本更新说明给读者的一封信FPGA就业高端项目培训计划免责声明 2、相关方案推荐我这里已有的FPGA图像缩放方案我已有的FPGA视频拼接叠加融合方案本方案的Xilinx Kintex7系列FPGA上的ov5640版本本方案的Xilinx Kintex7系列FPGA上的HDMI版本 3、设计思路框架设计框图…

黑马程序员前端web入门:新浪新闻

黑马程序员前端web入门&#xff1a;新浪新闻 几点学习到的&#xff1a; 设置li无圆点: list-style: none;设置a无下划线&#xff1a;text-decoration: none;a属于行内元素&#xff0c;高度hegiht不起作用&#xff0c;可以设置 display: block; 把它变成块元素。此时&#xff0c…

创新型海外网红合作模式:打破传统,解锁品牌推广新机会

随着社交媒体的普及和全球化的发展&#xff0c;海外网红营销已经成为品牌推广的重要渠道。然而&#xff0c;传统的合作模式往往局限于简单的赞助或广告投放&#xff0c;缺乏深度和创新。为了打破这一局限&#xff0c;品牌需要探索一些创新型的海外网红合作模式&#xff0c;以带…

【简便方法和积累】pytest 单元测试框架中便捷安装插件和执行问题

又来进步一点点~~~ 背景&#xff1a;之前写了两篇关于pytest单元测试框架的文章&#xff0c;本篇内容对之前的做一个补充 一、pytest插件&#xff1a; pytest 有非常多的插件&#xff0c;很方便&#xff0c;以下为插件举例&#xff1a; pytest&#xff0c;pytest-html&#x…

【算法】拦截导弹(线性DP)

题目 某国为了防御敌国的导弹袭击&#xff0c;发展出一种导弹拦截系统。 但是这种导弹拦截系统有一个缺陷&#xff1a;虽然它的第一发炮弹能够到达任意的高度&#xff0c;但是以后每一发炮弹都不能高于前一发的高度。 某天&#xff0c;雷达捕捉到敌国的导弹来袭。 由于该系…

机器学习4-多元线性回归

多元线性回归(Multiple Linear Regression)是线性回归的一种扩展形式&#xff0c;用于建立因变量与多个自变量之间的关系。在简单线性回归中&#xff0c;我们考虑一个因变量和一个自变量之间的线性关系&#xff0c;而多元线性回归允许我们考虑多个自变量对因变量的影响。 一般…

openssl3.2 - .pod文件的查看方法

文章目录 .pod文件的查看方法概述笔记初步的解决方法备注 - pod2html.bat的详细用法好像Perl就自带这个BATEND .pod文件的查看方法 概述 看到openssl源码目录下有很多.pod文件, 软件发布的帮助内容都在里面. 当make install后, 大部分的.pod都会转成html文件, 但是有一部分…

FreeBSD Virtual Box 突然发现只能创建32位系统问题解决

要用 Virtual Box 起kali系统的映像&#xff0c;发现只能创建32位系统&#xff0c;于是百度&#xff0c;得出的结论是BIOS里没有开CPU 虚拟化&#xff0c;进入BIOS将其打开&#xff0c;问题解决。 以前怎么没有注意到这个问题呢&#xff1f; 而且里面有个Ubunut的虚拟&#xff…