Topic: Collapse element preventing correct alignment
*_Expected behavior_*When enabling the right property, I would expect the navbar content to align to the right.Fully working example using react with the standard JS MDB library (Alfrey)
*_Actual behavior_*Right aligned div is appearing underneath
*_Resources (screenshots, code snippets etc.)_*I have managed to find the cause of the issue, it is an extra div wrapping the navbar items when creating the collapse. The extra div prevents the navbar-collapse from aligning contents correctly. From what I can tell, this extra div does nothing and there is no styling attached to the collapse-content class.
I've found some CSS that seems to fix it:
.collapse-content {
flex-basis: 100%;
flex-grow: 1;
align-items: center;
}
@media (min-width: 1400px) {
.collapse-content {
flex-basis: auto;
justify-content: space-between;
display: flex;
}
}
This is the code used to generate the broken navbar
<MDBCollapse navbar open={toggler} id='navbarSupportedContent'>
<MDBNavbarNav fullWidth={false} className={"mb-2 mb-lg-0 me-auto"}>
<NavBarLink link={''} title={'Home'} end setToggle={setToggler} />
<NavBarLink link={'calendar'} title={'Calendar'} end setToggle={setToggler} />
<NavBarLink link={'fees'} title={'Site Fees'} end setToggle={setToggler} />
<NavBarLink link={'bookings'} title={'Manage Bookings'} setToggle={setToggler} />
<NavBarLink link={'new'} title={'New Booking'} end setToggle={setToggler} />
{user && isManagement() ? <>
<NavBarLink link={'/manage'} title={'Administration'} end setToggle={setToggler} />
</> : null}
</MDBNavbarNav>
<MDBNavbarNav right fullWidth={false}>
{!user?
<NavBarLink link={'/login'} title={'Login/Register'} end setToggle={setToggler} />:
<MDBNavbarItem>
<MDBDropdown>
<MDBDropdownToggle tag={'NavLink'} className={(isActive, isPending) =>
isActive||isPending?"nav-link dropdown-toggle px-4 active":"nav-link dropdown-toggle px-4"
}>
</MDBDropdownToggle>
</MDBDropdown>
</MDBNavbarItem>
}
</MDBNavbarNav>
</MDBCollapse>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 8.0.0
- Device: MacBook Pro (M Series Processor)
- Browser: Safari
- OS: macOS Sonoma
- Provided sample code: No
- Provided link: Yes
Mateusz Lazaru staff commented 6 months ago
Thank you for reporting the issue and sharing a workaround solution, I am adding a task to fix the problem.