Rolling on SideNav


Topic: Rolling on SideNav

master@mastersistemas.net pro asked 6 years ago

Good afternoon, the SideNav scrolling is not working. For example, when I have many.
SideNavLink inside SideNavCat:

<SideNavNav><SideNavCat name=\\\"Submit blog\\\"icon=\\\"chevron-right\\\">

<SideNavLink>A</SideNavLink>
<SideNavLink>B</SideNavLink>
<SideNavLink>C</SideNavLink>
<SideNavLink>D</SideNavLink>
<SideNavLink>E</SideNavLink>
<SideNavLink>F</SideNavLink>
<SideNavLink>G</SideNavLink>
<SideNavLink>H</SideNavLink>
<SideNavLink>I</SideNavLink>
<SideNavLink>J</SideNavLink>
<SideNavLink>K</SideNavLink>
<SideNavLink>L</SideNavLink>
<SideNavLink>M</SideNavLink>
<SideNavLink>N</SideNavLink>
<SideNavLink>O</SideNavLink>
<SideNavLink>P</SideNavLink>
<SideNavLink>Q</SideNavLink>
<SideNavLink>R</SideNavLink>
<SideNavLink>S</SideNavLink>
<SideNavLink>T</SideNavLink>

<SideNavNav>

Can not see all SideNavLink options 'm using the MDB package itself to set the example.

https://ibb.co/nFLdCe


Mikołaj Smoleński staff answered 6 years ago

Hi there, Scrollbar is not built into the SideNav component, but You can add it manually. Please put PerfectScrollbar inside SideNavCat component and add some styles to it. Here is the example:  
<SideNavCat style={outerContainerStyle}>
 <PerfectScrollbar className="scrollbar-primary">
  <SideNavLink>Link 1</SideNavLink>
  (...)
 </PerfectScrollbar>
</SideNavCat>
const outerContainerStyle = {height: '200px'}
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: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No