Collapse element preventing correct alignment


Topic: Collapse element preventing correct alignment

EthanPB pro premium priority asked 6 months ago

*_Expected behavior_*When enabling the right property, I would expect the navbar content to align to the right.Aligned ItemsFully working example using react with the standard JS MDB library (Alfrey)

*_Actual behavior_*Right aligned div is appearing underneathUnaligned Items

*_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.

offending code

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>

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.


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: 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