容器溢出时,react-bootstrap OverlayTrigger位置不正确:自动

时间:2019-02-27 22:46:04

标签: javascript html css reactjs react-bootstrap

编辑:找到解决方案:popperConfig = {添加到OverlayTrigger的{修饰符:{preventOverflow:{boundariesElement:'offsetParent'}}}}有所不同。我要问的是是否有人有同样的问题。

使用react-bootstrap(v1.0.0-beta.5)渲染内容时遇到问题。我有包含按钮列表的主容器,每个按钮都用OverlayTrigger(重叠式工具提示)包装。由于有很多列表项,所以整个容器必须具有“ overflow-x:auto”,但似乎破坏了工具提示/叠加层的位置(当我从CSS中删除它时,叠加层的位置就很好了。)

I attached pic

我附了一张照片。如您所见,工具提示位于按钮上,而不是位于按钮的顶部。

有人可以帮助我了解如何解决吗?

 .container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

const editTooltip = <Tooltip id='edit_tooltip'>hello edit tooltip</Tooltip>;

<div className='container'>
   <div className='item-1'>
     <OverlayTrigger
       placement='top'
       overlay={editTooltip}
       delay={700}
      >
       <Button
         variant={'light'}
         bsPrefix={'custom-btn'}
         onClick={() => console.log('clicked')}
      >
        <Icon icon='pencil' />
      </Button>
    </OverlayTrigger>
  </div>
</div>

1 个答案:

答案 0 :(得分:0)

我遇到了一个问题,我的弹出器打算放在元素的“底端”-即使我的目标似乎设置正确(并且弹出器被附加到body元素上,所以它不应该)如果受任何约束),我越靠近包含目标的元素的底部(表中的行,每行中的一个图标触发了该行的选项弹出窗口),弹出窗口似乎就会被推入垂直放置,以便它始终显示在行所在的容器中。我找不到当前文档,甚至显示“ offsetParent”作为boundaryElement的选项...但是此解决方案对我有用。很棒的发现! (即使我仍然不完全了解您是如何找到它的...)

注意:我的示例仅使用了react-bootstrap中的一个简单的Overlay组件,但问题/解决方案类似。