Navbar dropdown slipping off screen


Topic: Navbar dropdown slipping off screen

O53332715 asked 6 years ago

<NavbarNav right>
   <NavItem>
      <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
         <DropdownToggle nav caret>Dropdown</DropdownToggle>
         <DropdownMenu>
            <DropdownItem href="#">Action</DropdownItem>
            <DropdownItem href="#">Another Action</DropdownItem>
            <DropdownItem href="#">Something else here</DropdownItem>
            <DropdownItem href="#">Something else here</DropdownItem>
         </DropdownMenu>
      </Dropdown>
   </NavItem>
</NavbarNav>

When pressing the dropdown button, the dropdown comes down, but a quite large bit goes off the screen (see attached screenshot). How do I fix this?
https://i.imgur.com/fyymtgy.png



O53332715 answered 6 years ago

Fixed by adding
className="dropdown-menu-right"
to the DropdownMenu

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes