Is there any css hack to stop a dropdown menu from causing an overflow?-CodePudding

My problem: https://i.gyazo.com/152caf74df3c484e770f9e8c34f5471e.mp4

If I click on the button, then it causes an overflow. I want to menu to appear without the overflow.

Sandbox: https://stackblitz.com/edit/react-ts-8aq1rq?file=App.tsx,index.html

Code:

import * as React from 'react';
import './style.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { NavDropdown, Button } from 'react-bootstrap';

// @ts-nocheck

export default function App() {
  return (
    <div className="table-responsive">
      <div className="table">
        <table
          id="user-list-table"
          className="table table-striped"
          role="grid"
          data-toggle="data-table"
        >
          <thead>
            <tr className="light">
              <th>Col one</th>
              <th>Col two</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>2</td>
              <td>
                <NavDropdown
                  id="basic-nav-dropdown"
                  title={
                    <Button className="btn btn-sm btn-icon" variant="primary">
                      click
                    </Button>
                  }
                >
                  <NavDropdown.Item>Option 1</NavDropdown.Item>
                  <NavDropdown.Item>Option 2</NavDropdown.Item>
                  <NavDropdown.Item>Option 3</NavDropdown.Item>
                </NavDropdown>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}

Is there another bootstrap component that does this so that I can swap NavDropdown to that? Or is there some css hack that lets me do this?

CodePudding user response：

The issue is that there isn't enough room to dropdown the nav list inside the div with the class of table-responsive. You can give it some min height or padding, but that might be weird if you have content below it. So you can add a negative margin to counter the additional padding:


.table-responsive {
  padding-bottom: 100px;
  margin-bottom: -100px;
}

Demo