antd气泡组件问题

Question

antd PopOver组件问题

popOver自定义的content内容高度过高造成其位置发生变化
期望结果：气泡框还是在原来点击按钮的下方
实际结果：过高造成气泡框覆盖了点击按钮

Answer 1

基于Monster 组和AIGC的调写：

为了解决问题，可以考虑几种方法：

1. 设置固定的最大高度和滚动条：给 Popover 内容设置一个固定的最大高度，并在内容超出时使用滚动条。

.popover-content {
  max-height: 300px; /* 可以根据需要调整这个值 */
  overflow-y: auto;
}

然后将这个类名应用到你的 Popover 的 content 属性中。

1. 调整getPopupContainer属性：用Popover的getPopupContainer属性来锚定Popover到特定的DOM元素。这可以确保Popover始终相对于该特定元素定位。

<Popover getPopupContainer={(triggerNode) => triggerNode.parentNode}>
  // ...
</Popover>

1. 自定义调整位置：用 antd 的 Popover 组件的 placement 属性，可以尝试其他的位置，例如bottomLeft或bottomRight，以看看它们是否能提供您期望的行为。

2. 用autoAdjustOverflow属性：设置autoAdjustOverflow为false可以阻止Popover在空间不足时自动调整其位置。

<Popover autoAdjustOverflow={false}>
  // ...
</Popover>

• 尝试上述方法中的一个或多个，看看它们是否可以解决问题。