Scrolling main content


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 commented 5 years ago

Hi! Thank you for reporting the problem. We'll take a closer look at that.

Best Regards, Bartosz.


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.


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