React-Bootstrap & end-aligned nav menus w/ .dropdown-menu-end

user_1909206 0
Viewed 215

I'm working with react-bootstrap 2.3.0, have a fixed navbar with a few NavDropdowns and have them all aligned right. I need to apply the class dropdown-menu-end to the last Dropdown div, but the NavDropdown component covers the entirety of the nav item and the dropdown menu.

The top div with the class applied is what the NavDropdown component renders, but the blue selected div is where the class needs to be.

Is there a way to get this class applied in React Bootstrap?

<Nav ... >

<NavDropdown title="Tools & Calculators" id="navbarToolsAndCalcsDropdown" className={"dropdown-menu-end"}>
    <Button as={NavDropdown.Item} onClick={this.handleThing}>thing</Button>
    <NavDropdown.Item href="#action">Other Link</NavDropdown.Item>
</NavDropdown>

</Nav>

enter image description here

react-bootstrap
1 Answers

On Dropdown.Menu component there is a property called align, you have to set it to end:

https://react-bootstrap.netlify.app/components/dropdowns/#dropdown-menu-props

The reason why you don't see your dropdown menu aligning right is the fact, that the class dropdown-menu is given a min-width of 10rem. When you want to remove the min-width, target bootstrap class in css either directly or create your own class and target the dropdown menu div:

.dropdownMenu div {
  min-width: 0rem;
}

I created a sandbox where I demonstrate this behaviour:

https://codesandbox.io/s/stupefied-cherry-uedct

enter image description here

user_59804130
Related