容器溢出时，react-bootstrap OverlayTrigger位置不正确:自动 [英] React-bootstrap OverlayTrigger is not positioned correctly while container has overflow: auto

问题描述

找到解决方案:

popperConfig={{
    modifiers: {
        preventOverflow: {
            boundariesElement: 'offsetParent'
        }
    }
}} 

将此添加到OverlayTrigger会有所不同.我要问的是是否有人有同样的问题.

Adding this to OverlayTrigger makes difference. I am leaving question if anyone had same issue.

使用react-bootstrap(v1.0.0-beta.5)渲染内容时遇到问题.我有带按钮列表的主容器，每个按钮都用OverlayTrigger(叠加层中的Tooltip)包裹.由于整个容器中必须有很多c 'overflow-x: auto'列表项，但它似乎破坏了Tooltips/Overlay的位置(当我从css中删除它时，overlay的位置就很好了.)

I've got a problem while rendering content using react-bootstrap (v1.0.0-beta.5). I have main container with list of buttons and every button is wrapped with OverlayTrigger (Tooltip in overlay). As there are many list items whole container must have 'overflow-x: auto', but it seems to break Tooltips/Overlays positioning (when I remove it from css, overlay is positioned just fine).

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

I attached a pic. As you can see tooltip is positioned on button instead of being at the top of it.

任何人都可以帮助我了解如何走动吗?

Can anyone help me with idea how to walk it around?

 .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>

推荐答案

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

I had an issue where my popper was intended to be on the "bottom-end" of an element - and even though my target appeared to be properly set (and the popper was appended to the body element, so it shouldn't have been constrained by anything), the closer that I got to the bottom of the element containing my target (rows in a table, an icon in each row triggered a popper of options for that row), the popper would seem to get pushed vertically so that it would always appear within the container that the rows lived within. I can't find current documentation that even shows "offsetParent" as an option for boundariesElement...but this solution worked for me. Great find!! (even if I still don't completely understand how you found it...)

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

Note: My example was just using a simple Overlay component from react-bootstrap, but similar issue/resolution.

这篇关于容器溢出时，react-bootstrap OverlayTrigger位置不正确:自动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！