antdesign和react的使用dropDown定位问题

  • Select基于rc-select,rc-select的下拉框基于rc-trigger,rc-trigger的下拉框定位基于第三方库dom-align,dom-align的overflow参数的adjustX、adjustY可以计算可视区域,在下拉框溢出可视区域的时候添加偏移量将位置放到可视区域中。
  • 依赖链路dependency chain: Select.dropdownAlign => rc-select.dropdownAlign => rc-trigger.popupAlign => dom-align.alignConfig
  • rc-select默认开启Y轴溢出位置调整,因此在可视空间不足时下拉框位置会自动上移,导致Select的输入框被遮挡
  • 需要注意的是,默认情况是是可视空间,而不是所拥有的空间
  • 未展开时: => 展开后,输入框被遮挡:
  • 可以通过配置Select组件的dropdownAlign属性来覆盖默认的定位配置,截止今天该属性antd官网并没有说明文档,具体参数可参考dom-align:
dropdownAlign={{
  overflow: {
    adjustY: false // 关闭溢出位置调整
  }
}}

配置前效果,此时下拉框错位:
在这里插入图片描述

配置后效果,此时只要下方还有空间就不会错位:
在这里插入图片描述

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值