React Bootstrap 下拉菜单在数据网格中部分可见

Question

图值一千字，基本上困扰我的是以下问题：

我很抱歉文字模糊，但公司政策不允许我透露太多...正如您从屏幕截图中看到的那样，我有一个不完全可见的下拉菜单（设置为下拉菜单） .当数据网格很大且包含大量数据时，对于大多数行来说这不是问题，但对于前几行或数据网格中只有少量数据时，这始终是问题。

我添加了一些用于 JSBin 的代码（不是一个工作示例），但只添加了其中的一部分，因为，嗯，公司政策。我希望提供的代码至少会有点用处。请注意，这是使用 React Bootstrap 构建的。我已经包含了一些使用的 JSX 以及与数据网格相关的 CSS 类和项目编译时可见的 HTML。

https://jsbin.com/wuvuhemewo/edit?html,css,js,output

我什至不记得我尝试过的所有事情，从几乎在所有地方调整 z-index（绝望的时候需要绝望的措施）到尝试我可以在 google 和 Stack Overflow 上找到的所有可能的解决方案。

这是我展开害羞的“选项”“下拉”菜单后得到的结果：

<div class="datagrid__options-btn show dropup">
   <button aria-haspopup="true" aria-expanded="true" id="dropdown-basic-button" type="button" class="dropdown-toggle btn btn-link">Options</button>
   <div x-placement="top-start" aria-labelledby="dropdown-basic-button" class="dropdown-menu show" style="position: absolute; top: auto; left: 0px; margin: 0px; right: auto; bottom: 0px; transform: translate(2.4px, -16px);" data-popper-reference-hidden="false" data-popper-escaped="false" data-popper-placement="top-start">
            <a href="#" class="dropdown-item" role="button">Option1</a>
            <a href="#" class="dropdown-item" role="button">Option2</a>
            <a href="#" class="dropdown-item" role="button">Option3</a>
            <a href="#" class="dropdown-item" role="button">Option4</a>
            <a href="#" class="dropdown-item" role="button">Option5</a>
            <a href="#" class="dropdown-item" role="button">Option6</a>
            <a href="#" class="dropdown-item" role="button">Option7</a>
</div>

更新： 同时我发现overflow-x是“吃掉”下拉菜单的东西。当我从这两个中删除它时：

      <div class="dg-table__wrapper">
         <div class="table-responsive">

下拉列表变得可见，但现在数据网格太宽了，任何添加溢出的尝试都会吃掉下拉列表。我在 Stack Overflow 上找到了这个：https://stackoverflow.com/a/6433475

这可能是这里的问题吗？

Answer 1

你是对的，这个问题是因为overflow CSS 属性。 docs 中并没有真正详细说明，但是您可以利用 Dropdown.Menu 的 prop popperConfig 并使菜单具有 CSS 属性 position: fixed 并具有动态定位，这要归功于 React Bootstrap 使用的 Popper.js。

const popperConfig = {
  strategy: "fixed"
};

return (
  <div style={containerStyle}>
    <Row>
      <Dropdown>
        <Dropdown.Toggle variant="success" id="dropdown-basic">
          Fixed Popper
        </Dropdown.Toggle>

        <Dropdown.Menu popperConfig={popperConfig}>
          <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
          <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
          <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
          <Dropdown.Item href="#/action-4">Something else</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
      ...

代码沙盒：https://codesandbox.io/s/react-bootstrap-fixed-dropdown-popper-fqdnu?file=/src/App.js

投递路线：https://react-bootstrap.netlify.app/components/dropdowns/#drop-directions

在我链接的同一个 Popper.js 文档中，还有其他有用的技术，例如 Using Modifiers like Prevent Overflow - 它可以作为该问题的替代解决方案。这归结为开发人员的用户体验视角。

---

此外，这是我最近使用reactstrap 而不是react-bootstrap 写的替代解决方案：Reactstrap DropdownMenu bottom overflow issue

Answer 2

995faf8e76605e973 回答 https://stackoverflow.com/a/63633030/14181063 帮助！这是修改我的代码后的样子：

const popperConfig = {
  strategy: "fixed"
};

<Dropdown id="dropdown-basic-button" drop="up" className="datagrid__options-btn">
              <Dropdown.Toggle variant="link">Options</Dropdown.Toggle>
              <Dropdown.Menu popperConfig={popperConfig}>
                {row.options.map((action, i) => {
                  return (
                    <Dropdown.Item
                      key={i}
                      onClick={(e) => {
                        e.preventDefault();
                        functions.doAction(action, row.originalIndex);
                      }}
                    >
                      {action}
                    </Dropdown.Item>
                  );
                })}
              </Dropdown.Menu>
            </Dropdown>

同时，我发现将 style={{position: "static"}} 添加到 DropdownButton 元素也可以！但是，我会坚持 95faf8e76605e973 发布的解决方案，因为它似乎更正确:)

<DropdownButton
     id="dropdown-basic-button"
     title="Options"
     variant="link"
     drop="up"
     style={{ position: "static" }}
     className="datagrid__options-btn"
    >