React Bootstrap dropup menu partially visible in the datagrid

Question

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

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?

95faf8e76605e973 · Accepted Answer · 2020-08-28T11:56:37.187

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

Thanks a lot mate, saved me of a huge headache. I would upvote you as well but I'm still not able to do it :) I have posted an answer below showing the result with your answer included + something I figured out myself. But as stated there, I'll stick to your solution rather than mine. — Nox, Aug 28 '20 at 12:09

Nox · Answer 2 · 2020-08-28T12:12:44.287

995faf8e76605e973 answer https://stackoverflow.com/a/63633030/14181063 helped! This is how it looks after modifying my code:

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>

Also, in the meantime, I have figured out that adding style={{position: "static"}} to the DropdownButton element works too! However, I will stick to the solution posted by 95faf8e76605e973 as it seems more correct :)

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

React Bootstrap dropup menu partially visible in the datagrid

2 Answers2