How to enable overflow for `react-bootstrap` NavDropdown

Question

I'm using react-bootstrap's NavDropdown as part of a NavBar to display a list of data. Occasionally the list is longer than the rest of the view, cutting off the bottom of the list. I need to be able to add overflow: auto to the list, but can't figure out how to do it. Wrapping the NavDropdown or the items within it in a styled div breaks react-bootstrap's styling. Attempting to style the NavDropdown directly (via className or style) breaks react-bootstrap's styling. Anyone been able to solve this?

The code is roughly:

<NavBar>
  <NavBar.Collapse>
    <Nav>
      <NavDropdown>
        lots of <MenuItem />
      </NavDropdown>
    </Nav>
  </NavBar.Collapse>
</NavBar>

dangerismycat · Accepted Answer · 2018-02-09 19:38:47Z

2

The key is to look deeper than the React elements, and consider the rendered html/css to figure out how to target the proper elements. In this case, we need to target ul.dropdown-menu within <NavBar>. So we can put a className on that element and style accordingly:

component

<NavBar className="navBar">
...

stylesheet

.navBar ul.dropdown-menu {
  max-height: 90vh;
  overflow-y: auto;
}

max-height can of course be whatever works for the desired UI.

Also of note if using css-modules (or similar libraries): because of auto-namespacing, this styling will need to be included in a base stylesheet, not one that will be imported into the component and namespaced.

answered Feb 9, 2018 at 19:38

dangerismycat

8742 gold badges12 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

How to enable overflow for `react-bootstrap` NavDropdown

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related