Rolling on SideNav

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
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
 
Write
Create snippet
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
About author
master@mastersistemas.net
Pro User
118Support score
19Questions 11Answers
0Snippets likes 0Snippets