Is there any CSS hack to stop a dropdown menu from causing an overflow?

Question

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 it? If not, is there something else like a CSS hack that lets me do this?

jme11 · Accepted Answer · 2022-11-08 22:01:20Z

1

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

answered Nov 8, 2022 at 22:01

jme11

17.9k2 gold badges40 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jme11 Over a year ago

You're welcome. Just make sure that you think about what happens at the bottom of the page. You'll want to make sure that there's always enough space to display your dropdown.

Collectives™ on Stack Overflow

Is there any CSS hack to stop a dropdown menu from causing an overflow?

Code:

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Code:

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related