修复 NextUI Modal 组件在 iOS 上的问题

2024-10-12 · 周六一般

NextUI 总算推出了一个修复 Modal 在 iOS 上必须固定定位的版本,但是我更新之后,它依旧存在点细节问题,由于其父元素使用 Flex 布局,但采用了 align-items: center 来定位居中,因此有一个 Bug,弹出键盘之后上半部分无法显示,参考我往常的经验应该使用 margin-top: auto; margin-bottom: auto。还有一个滚动容器导致下半部分“截肢”的问题但是它写的不好咱也没有什么办法呢。

以下是我的样式覆盖方案,可以解决它默认的一些奇怪规则。item-start 让 Flex 默认对齐,h-auto 覆盖其 JS 控制的奇怪高度,my-auto 居中并修复“截肢”问题。

<Modal
  placement="center"
  shouldBlockScroll={false}
  classNames={{ wrapper: "items-start h-auto", base: "my-auto" }}
>
  ...
</Modal>
Paul

Paul

特立独行的一只前端菜狗。这篇日记编写大概耗时了 14 分钟,内容均为个人原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!如本站内容对你有所帮助的话,不妨 捐助支持 一下?

奇趣音乐盒技术源于 Kico Player
Emmm,这里是歌词君