MDBDropdownMenu leaving screen


Topic: MDBDropdownMenu leaving screen

Matheus Pereira asked 5 years ago

My dropdown menu is leaving the screen on the top right. How can I fix it?

Screenshot

I already tried to add the class dropdown-menu-right, but it makes no difference

This is the code (the same from the examples): `

            <MDBNavItem>
              <MDBDropdown>
                <MDBDropdownToggle nav caret>
                  <MDBIcon icon="user" />
                </MDBDropdownToggle>
                <MDBDropdownMenu className="dropdown-default dropdown-menu-right">
                  <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                  <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                  <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            </MDBNavItem>

Konrad Stępień staff answered 5 years ago

Hi @Matheus Pereira,

Try add right property like this:

<MDBDropdownMenu right className='dropdown-default'>
  <MDBDropdownItem href='#!'>Action</MDBDropdownItem>
  <MDBDropdownItem href='#!'>Another Action</MDBDropdownItem>
  <MDBDropdownItem href='#!'>Something else here</MDBDropdownItem>
  <MDBDropdownItem href='#!'>Something else here</MDBDropdownItem>
</MDBDropdownMenu>

Dropdown with right property - img


@Konrad Stępień Thank you so much for the fast answer, it worked!!

Where can I see the documentation for this? Where could I have read about the "right" option?

Thanks again!


Konrad Stępień staff commented 5 years ago

Hi @Matheus Pereira,

You should find this property on this page. On top of page you have Api tab there you can find documentation about this component.

I found this property from our demo page and I have not noticed that our documentation does not have this property described. I will fix it for next release (12 November)

Sorry for problems and best regards, Konrad!


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.10.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Linux Mint
  • Provided sample code: No
  • Provided link: No