React Navbar Dropdown Menu off Screen


Topic: React Navbar Dropdown Menu off Screen

hoaraucg asked 5 years ago

Expected behavior Menu should appear right aligned to the screen

Actual behavior Menu actually appears offscreen when dropdown is used.

Resources (screenshots, code snippets etc.) Have tried using dropdown-menu-right to no avail.

  <MDBNavbar color="elegant-color-dark" dark expand="md">
    <MDBNavbarBrand>
    <div className="logo-wrapper 20x20">
            <a href="#!">
              <img style={{width: '60px', height: '60px'}} alt="Arrg Logo" src="https://i.imgur.com/sEitLk6.png" />
            </a>
          </div>
    </MDBNavbarBrand>
    <MDBNavbarToggler onClick={this.toggleCollapse} />
    <MDBCollapse id="navbarCollapse3" isOpen={this.state.isOpen} navbar>
      <MDBNavbarNav right center>
      <MDBNavItem>
          <MDBDropdown dropdown-menu-right>
            <MDBDropdownToggle nav caret>
              <MDBIcon icon="user" height="60px" width="60px" className="center"/>
            </MDBDropdownToggle>
            <MDBDropdownMenu dropdown-menu-right className="dropdown-dark">
              <MDBDropdownItem href="/">Home</MDBDropdownItem>
              <MDBDropdownItem href="/create">Create your Arrg-ument</MDBDropdownItem>
              <MDBDropdownItem href="/profile">View your Profile</MDBDropdownItem>
              <MDBDropdownItem onClick={this.onLogoutClick} href="/">Logout</MDBDropdownItem>
            </MDBDropdownMenu>
          </MDBDropdown>
        </MDBNavItem>
      </MDBNavbarNav>
    </MDBCollapse>
  </MDBNavbar>

Aliaksandr Andrasiuk staff answered 5 years ago

Hi,

Try to use right property instead of dropdown-menu-right :

import React, { Component } from 'react';
import {
  MDBNavbar,
  MDBNavbarBrand,
  MDBNavbarToggler,
  MDBCollapse,
  MDBNavbarNav,
  MDBNavItem,
  MDBDropdown,
  MDBDropdownToggle,
  MDBIcon,
  MDBDropdownMenu,
  MDBDropdownItem
} from 'mdbreact';

class InputPage extends Component {
  state = {
    isOpen: false
  };

  render() {
    return (
      <MDBNavbar color='elegant-color-dark' dark expand='md'>
        <MDBNavbarBrand>
          <div className='logo-wrapper 20x20'>
            <a href='#!'>
              <img
                style={{ width: '60px', height: '60px' }}
                alt='Arrg Logo'
                src='https://i.imgur.com/sEitLk6.png'
              />
            </a>
          </div>
        </MDBNavbarBrand>
        <MDBNavbarToggler onClick={this.toggleCollapse} />
        <MDBCollapse id='navbarCollapse3' isOpen={this.state.isOpen} navbar>
          <MDBNavbarNav right center>
            <MDBNavItem>
              <MDBDropdown dropdown-menu-right>
                <MDBDropdownToggle nav caret>
                  <MDBIcon
                    icon='user'
                    height='60px'
                    width='60px'
                    className='center'
                  />
                </MDBDropdownToggle>
                <MDBDropdownMenu right className='dropdown-dark'>
                  <MDBDropdownItem href='/'>Home</MDBDropdownItem>
                  <MDBDropdownItem href='/create'>
                    Create your Arrg-ument
                  </MDBDropdownItem>
                  <MDBDropdownItem href='/profile'>
                    View your Profile
                  </MDBDropdownItem>
                  <MDBDropdownItem onClick={this.onLogoutClick} href='/'>
                    Logout
                  </MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            </MDBNavItem>
          </MDBNavbarNav>
        </MDBCollapse>
      </MDBNavbar>
    );
  }
}

export default InputPage;

Hope I could help.

Best regards.


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.18.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags