Search code examples
htmlcssreactjstwitter-bootstrapreact-bootstrap

React Bootstrap dropup menu partially visible in the datagrid

The picture is worth a thousand words, basically what bothers me is the following issue:

Dropdown menu going "under" the table borders

I'm sorry for the blurred text but the company policy doesn't allow me to reveal much... As you can see from the screenshot, I have a dropdown menu (set to dropup) which isn't completely visible. This isn't the issue for most of the rows when the data grid is huge with lots of data, but it's always the issue for the first few rows or when there is just a few data in the data grid.

I have added some code used to the JSBin (not a working example) but only the parts of it because, well, company policy. I hope the code provided will be at least a little bit useful. Please note that this is built with React Bootstrap. I have included some of the JSX used as well as the CSS classes relevant to the data grid and HTML visible when the project is compiled.

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

I cannot even remember everything I've tried, starting from adjusting z-index almost everywhere (desperate times require desperate measures) to trying every possible solution I could find on google and here on Stack Overflow.

Here is what I get once I expand the shy Options "dropup" menu:

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

UPDATE: what I figured out in the meantime is that overflow-x is what is "eating" away the dropdown menu. When I remove it from these two:

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

the dropdown becomes visible, but now the datagrid is too wide and any try in adding the overflow just eats out the dropdown. I have found this on Stack Overflow: https://stackoverflow.com/a/6433475

Could it be that that is somehow the issue here?

Solution

  • You are correct, this issue is because of the overflow CSS property. It's not really elaborated in the docs, but you can utilize the prop popperConfig of Dropdown.Menu and make the menu have the CSS property position: fixed and have dynamic positioning thanks to Popper.js which is utilized by 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: https://codesandbox.io/s/react-bootstrap-fixed-dropdown-popper-fqdnu?file=/src/App.js

    Drop Directions: https://react-bootstrap.netlify.app/components/dropdowns/#drop-directions

    On the same Popper.js documentation I linked, there are also other useful techniques such as Using Modifiers like Prevent Overflow - which can be an alternative solution to the issue. It boils down to the developer's UX perspective.

    In addition, here is alternate solution I've written about recently using reactstrap instead of react-bootstrap: Reactstrap DropdownMenu bottom overflow issue