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

问题描述

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

对模糊的文字表示抱歉，但是公司政策不允许我透露太多信息...从屏幕截图中可以看到，我有一个下拉菜单（设置为下拉菜单），该菜单不完全可见。当数据网格中包含大量数据时，对于大多数行而言，这并不是问题，但对于前几行或当数据网格中仅有少量数据时，这始终是问题。

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

https://jsbin.com/wuvuhemewo/edit?html,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">

该下拉列表变得可见，但是现在数据网格太宽了，任何尝试添加溢出的尝试都会吃掉该下拉列表。我在堆栈溢出中发现了此问题：https://stackoverflow.com/a/6433475

这可能是这里的问题吗？

解决方法

您是正确的，此问题是由于overflow CSS属性引起的。 docs中并未对此进行详细说明，但是您可以利用popperConfig的道具Dropdown.Menu并使菜单具有CSS属性position: fixed并通过{{ 3}}，由React Bootstrap使用。

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

CodeSandBox：Popper.js

投放方向：https://codesandbox.io/s/react-bootstrap-fixed-dropdown-popper-fqdnu?file=/src/App.js

在我链接的同一篇Popper.js文档中，还有其他有用的技术，例如https://react-bootstrap.netlify.app/components/dropdowns/#drop-directions-可以替代此问题。归结为开发人员的UX观点。

此外，这是我最近使用reactstrap而不是react-bootstrap：Using Modifiers like Prevent Overflow

写的另一种解决方案 ,

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>

同时，我发现向dropdownButton元素添加style = {{position：“ static”}}}也是可行的！但是，我会坚持使用95faf8e76605e973发布的解决方案，因为它似乎更正确：）

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

html react-bootstrap reactjs reactjs reactjs reactjs twitter-bootstrap