Topic: React Navbar Dropdown Menu off Screen
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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