Topic: Scrolling main content
mark goldin asked 5 years ago
I just realized that admin template scrolls including top navigation. So, I added fixed-top to make it stay. But still, vertical scroll bar takes the whole page height. How can I make the content be only the scrollable area?
Thanks
Bartosz Termena staff answered 5 years ago
Dear @mark goldin
I can't reproduce your problem, when i add fixed-top
to <mdb-navbar>
, everything looks fine (sidenav and navbar are fixed, only content is scrollable). Could you show me your code? Below is my example:
navigation.component.html from admin-template:
<header>
<div class="sidebar-fixed position-fixed">
<a class="logo-wrapper waves-effect">
<img
src="../../../../assets/img/angular-mdb.png"
class="img-fluid"
alt=""
/>
</a>
<div class="list-group list-group-flush">
<a
routerLink="dashboards/v1"
routerLinkActive="active"
class="list-group-item list-group-item-action waves-effect"
>
<mdb-icon fas icon="chart-pie" class="mr-3"></mdb-icon>Dashboard
</a>
<a
routerLink="profiles/profile1"
routerLinkActive="active"
class="list-group-item list-group-item-action waves-effect"
>
<mdb-icon fas icon="user" class="mr-3"></mdb-icon>Profile</a
>
<a
routerLink="tables/table1"
routerLinkActive="active"
class="list-group-item list-group-item-action waves-effect"
>
<mdb-icon fas icon="table" class="mr-3"></mdb-icon>Tables</a
>
<a
routerLink="maps/map1"
routerLinkActive="active"
class="list-group-item list-group-item-action waves-effect"
>
<mdb-icon far icon="map" class="mr-3"></mdb-icon>Maps</a
>
<a
routerLink="nonExistingPath"
routerLinkActive="active"
class="list-group-item list-group-item-action waves-effect"
>
<mdb-icon fas icon="exclamation" class="mr-3"></mdb-icon>404</a
>
</div>
</div>
<mdb-navbar
[containerInside]="false"
SideClass="navbar navbar-expand-lg navbar-light white fixed-top"
>
<logo class="ml-3">
<a
class="navbar-brand"
href="https://mdbootstrap.com/angular/angular-bootstrap-getting-started/"
>
<strong class="blue-text">MDB</strong>
</a>
</logo>
<links>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" mdbWavesEffect
>Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="https://mdbootstrap.com/angular/angular-bootstrap-getting-started/"
target="_blank"
mdbWavesEffect
>About MDB</a
>
</li>
<li class="nav-item">
<a
class="nav-link"
href="https://mdbootstrap.com/angular/getting-started/"
target="_blank"
mdbWavesEffect
>Free download</a
>
</li>
<li class="nav-item">
<a
class="nav-link"
href="https://mdbootstrap.com/angular/angular-tutorial/"
target="_blank"
mdbWavesEffect
>Free tutorials</a
>
</li>
</ul>
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item">
<a
href="https://www.facebook.com/mdbootstrap"
class="nav-link"
target="_blank"
mdbWavesEffect
>
<mdb-icon fab icon="facebook-f"></mdb-icon>
</a>
</li>
<li class="nav-item">
<a
href="https://twitter.com/MDBootstrap"
class="nav-link"
target="_blank"
mdbWavesEffect
>
<mdb-icon fab icon="twitter"></mdb-icon>
</a>
</li>
<li class="nav-item">
<a
href="https://github.com/mdbootstrap/bootstrap-material-design"
class="nav-link border border-light"
target="_blank"
mdbWavesEffect
>
<mdb-icon fab icon="github" class="mr-2"></mdb-icon>MDB GitHub
</a>
</li>
<li class="nav-item">
<a
href="https://mdbootstrap.com/products/angular-ui-kit/"
class="ml-1 nav-link border border-light rounded"
mdbWavesEffect
>
<mdb-icon far icon="gem" class=" left"></mdb-icon> Go Pro</a
>
</li>
</ul>
</links>
</mdb-navbar>
</header>
Best Regards, Bartosz.
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 Angular
- MDB Version: 8.4.0
- Device: PC
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: No
Bartosz Termena staff commented 5 years ago
Hi! Thank you for reporting the problem. We'll take a closer look at that.
Best Regards, Bartosz.