MDB ScrollSpy - with content of variable height


Topic: MDB ScrollSpy - with content of variable height

anuragd7 asked 5 years ago

Expected behavior Hi I am trying to use scrollspy4 in my code. For this I am using the example code shown here to get the same behavior. However I need to make sure that the content being scrolled takes up the entire screen (100% height) as opposed to a fixed height of 12.5rem for the scrollspy-example class. To achieve this I have modified the code as shown below. However when I set the height for scrollspy-example class to auto I find that the scrollspy stops showing the correct section on scrolling the content (active class is not added to the link on scrolling). This starts to work correctly the moment I delete the the following code from my SCSS file

  .scrollspy-example {
        height: auto !important;
      }

However in this case the height of the content changes to 12.5rem. I want the scroll spy to correctly detect the scroll while at the same time filling the screen height. Please tell me how I can achieve this.

HTML

<div class="container-fluid">
  <div class="row">
    <!-- SIDE PANEL -->
    <div class="col-md-3 col-sm-4">
      <!--Grid column-->
      <!--Scrollspy-->
      <div id="abc" class="mdb-scrollspy-ex">
        <!-- Links -->
        <ul
          mdbScrollSpy="scrollspy4"
          class="mt-5 nav nav-pills default-pills smooth-scroll"
        >
          <li class="nav-item" (click)="select($event)">
            <a
              id="c1"
              [ngClass]="{ active: currentSelection === 'c1' }"
              mdbScrollSpyLink="section1"
              class="nav-link"
              >Section 1</a
            >
          </li>
          <li class="nav-item" (click)="select($event)">
            <a
              id="c2"
              [ngClass]="{ active: currentSelection === 'c2' }"
              mdbScrollSpyLink="section2"
              class="nav-link"
              >Section 2</a
            >
          </li>
          <li class="nav-item" (click)="select($event)">
            <a
              id="c3"
              [ngClass]="{ active: currentSelection === 'c3' }"
              mdbScrollSpyLink="section3"
              class="nav-link"
              >Section 3</a
            >
          </li>
          <li class="nav-item" (click)="select($event)">
            <a
              id="c4"
              [ngClass]="{ active: currentSelection === 'c4' }"
              mdbScrollSpyLink="section4"
              class="nav-link"
              >Section 4</a
            >
          </li>
        </ul>
        <!-- Links -->
      </div>
      <!--Scrollspy-->
    </div>
    <!-- MAIN SECTION -->
    <div class="col-md-9 col-sm-8">
      <!-- HEADING -->
      <div class="raleway my-4">
        <h2 id="termsofservice" class="text-center">
          <span>TERMS OF SERVICE</span>
        </h2>
      </div>
      <p class="subtext text-center">
        Last updated September 16 2019
      </p>

      <div id="main">
        <!--Spied element-->
        <div class="scrollspy-example z-depth-1 text-center p-0">
          <section
            mdbScrollSpyElement="scrollspy4"
            id="section1"
            class="p-5 blue lighten-4"
          >
            <h3>Section 1</h3>
            <p class="mb-0">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis
              iure exercitationem mollitia fugit asperiores temporibus magnam
              perspiciatis. Repellat quisquam culpa odit! Dolore non
              consequuntur dignissimos adipisci tenetur debitis, quisquam culpa.
              Laborum officiis deserunt, assumenda pariatur vel dolorum
              provident beatae tenetur nihil quo dicta eius enim cumque
              reprehenderit voluptate nam aperiam eveniet et iusto at magni.
              Necessitatibus laborum assumenda consequuntur voluptate.
              Recusandae mollitia sequi in aperiam enim nesciunt incidunt,
              cumque ut voluptates ea nam quam beatae maxime voluptatem.
              Accusamus, animi vel eaque voluptatibus ipsam odio est, minus
              obcaecati praesentium nam iure!
            </p>
          </section>
          <section
            mdbScrollSpyElement="scrollspy4"
            id="section2"
            class="p-5 red lighten-4"
          >
            <h3>Section2</h3>
            <p class="mb-0">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis
              iure exercitationem mollitia fugit asperiores temporibus magnam
              perspiciatis. Repellat quisquam culpa odit! Dolore non
              consequuntur dignissimos adipisci tenetur debitis, quisquam culpa.
              Laborum officiis deserunt, assumenda pariatur vel dolorum
              provident beatae tenetur nihil quo dicta eius enim cumque
              reprehenderit voluptate nam aperiam eveniet et iusto at magni.
              Necessitatibus laborum assumenda consequuntur voluptate.
              Recusandae mollitia sequi in aperiam enim nesciunt incidunt,
              cumque ut voluptates ea nam quam beatae maxime voluptatem.
              Accusamus, animi vel eaque voluptatibus ipsam odio est, minus
              obcaecati praesentium nam iure!
            </p>
          </section>
          <section
            mdbScrollSpyElement="scrollspy4"
            id="section3"
            class="p-5 green lighten-4"
          >
            <h3>Subsection 1B</h3>
            <p class="mb-0">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis
              iure exercitationem mollitia fugit asperiores temporibus magnam
              perspiciatis. Repellat quisquam culpa odit! Dolore non
              consequuntur dignissimos adipisci tenetur debitis, quisquam culpa.
              Laborum officiis deserunt, assumenda pariatur vel dolorum
              provident beatae tenetur nihil quo dicta eius enim cumque
              reprehenderit voluptate nam aperiam eveniet et iusto at magni.
              Necessitatibus laborum assumenda consequuntur voluptate.
              Recusandae mollitia sequi in aperiam enim nesciunt incidunt,
              cumque ut voluptates ea nam quam beatae maxime voluptatem.
              Accusamus, animi vel eaque voluptatibus ipsam odio est, minus
              obcaecati praesentium nam iure!
            </p>
          </section>
          <section
            mdbScrollSpyElement="scrollspy4"
            id="section4"
            class="p-5 indigo lighten-4"
          >
            <h3>Section 4</h3>
            <p class="mb-0">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis
              iure exercitationem mollitia fugit asperiores temporibus magnam
              perspiciatis. Repellat quisquam culpa odit! Dolore non
              consequuntur dignissimos adipisci tenetur debitis, quisquam culpa.
              Laborum officiis deserunt, assumenda pariatur vel dolorum
              provident beatae tenetur nihil quo dicta eius enim cumque
              reprehenderit voluptate nam aperiam eveniet et iusto at magni.
              Necessitatibus laborum assumenda consequuntur voluptate.
              Recusandae mollitia sequi in aperiam enim nesciunt incidunt,
              cumque ut voluptates ea nam quam beatae maxime voluptatem.
              Accusamus, animi vel eaque voluptatibus ipsam odio est, minus
              obcaecati praesentium nam iure!
            </p>
          </section>
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

.mdb-scrollspy-ex .nav-item {
  width: 100%;
}

.mdb-scrollspy-ex a {
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.1rem;
  padding: 0 5px;
  margin-top: 3px;
  margin-bottom: 3px;
  color: black;
}

#termsofservice {
  margin-top: 100px;
}
  @media (min-width: 768px){
    #abc {
      position: absolute;
      top: 0px;
      bottom: 0;
      left: 0;
      width: 25vw;
      overflow-y: scroll; 
      margin-top: 200px;
      background-color: aqua;
      height: 60vh;
      padding-left: 5px;
    }

    #main {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      overflow-y: scroll;
      margin-top: 200px;
    }
  }

  #sidebar {
    text-align: center;
    height:60vh;
  }

  #main {
    height:60vh;
  }

  .scrollspy-example {
    height: auto !important;
  }

TS

select(event) {
    console.log("Element clicked is " + event);
    const itemSelected = event.target.id;
    this.currentSelection = itemSelected;
  }

Actual behavior*

Resources (screenshots, code snippets etc.)


Bartosz Termena staff answered 5 years ago

Dear @anuragd7

Ok, so you want a height: 100% of container with content variable and still use overflow-y: auto with scroll-spy

Use calc() 'hack' to add something similar to height: auto to .scrollspy-example

calc() lets you combine arbitrary units of measure.

Try this example (now you can go ahead and add various long texts to sections):

<!--Grid row-->
<div class="row">
  <!--Grid column-->

  <div class="col-md-8">
    <!--Spied element-->
    <div class="scrollspy-example z-depth-1 text-center p-0">
      <section mdbScrollSpyElement="scrollspy4" id="section1" class="p-5 blue lighten-4">
        <h3>Section 1</h3>
        <p class="mb-0">
          ...ver long text
        </p>
      </section>

      <section mdbScrollSpyElement="scrollspy4" id="section2" class="p-5 red lighten-4">
        <h3>Section2</h3>
        <p class="mb-0">
          ...long text
        </p>
      </section>

      <section mdbScrollSpyElement="scrollspy4" id="section3" class="p-5 green lighten-4">
        <h3>Subsection 1B</h3>
        <p class="mb-0">
          ...very very very long text
        </p>
      </section>

      <section mdbScrollSpyElement="scrollspy4" id="section4" class="p-5 indigo lighten-4">
        <h3>Section 4</h3>
        <p class="mb-0">
          ...long text
        </p>
      </section>
    </div>
    <!--/.Spied element-->
  </div>
  <!--Grid column-->

  <!--Grid column-->
  <div class="col-md-3 mb-4">
    <!--Scrollspy-->

    <div class="mdb-scrollspy-ex">
      <div id="abc">
        <!-- Links -->
        <ul mdbScrollSpy="scrollspy4" class="mt-5 nav nav-pills default-pills smooth-scroll">
          <li class="nav-item">
            <a mdbScrollSpyLink="section1" class="nav-link" href="#section1">Section 1</a>
          </li>
          <li class="nav-item">
            <a mdbScrollSpyLink="section2" class="nav-link" href="#section2">Section 2</a>
          </li>
          <li class="nav-item">
            <a mdbScrollSpyLink="section3" class="nav-link" href="#section3">Section 3</a>
          </li>
          <li class="nav-item">
            <a mdbScrollSpyLink="section4" class="nav-link" href="#section4">Section 4</a>
          </li>
        </ul>
        <!-- Links
 -->
      </div>
    </div>
    <!--Scrollspy-->
  </div>
  <!--Grid
 column-->
</div>
<!--Grid row-->

styles.scss:

.mdb-scrollspy-ex .nav-item {
  width: 100%;
}

.mdb-scrollspy-ex a {
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.1rem;
  padding: 0 5px;
  margin-top: 3px;
  margin-bottom: 3px;
  color: black;
}
#abc {
  position: fixed;
}
.scrollspy-example {
  height: calc(100vh - 1px) !important;
}

body {
  overflow: hidden;
}

Hope it helps!

Best Regards, Bartosz.


anuragd7 commented 5 years ago

Thanks so much @Bartosz Termena! The suggestion to use calc worked perfectly.


Bartosz Termena staff answered 5 years ago

Dear @anuragd7

I think in this case you have to use mdbScrollSpyWindow instead of mdbScrollSpyElement.

First of all check this out: https://mdbootstrap.com/docs/angular/navigation/scrollspy/#dotted-scrollspy

In this example the content being scrolled takes up the entire screen (100% height).

Below is an example of my code based on yours (with sections filling the screen height):

HTML:

<div class="container-fluid">
  <div class="row">
    <!-- SIDE PANEL -->
    <div class="col-md-3 col-sm-4">
      <!--Grid column-->
      <!--Scrollspy-->
      <div id="abc" class="mdb-scrollspy-ex">
        <!-- Links -->
        <ul mdbScrollSpy="scrollspy4" class="mt-5 nav nav-pills default-pills smooth-scroll">
          <li class="nav-item">
            <a mdbScrollSpyLink="section1" class="nav-link" href="#section1">Section 1</a>
          </li>
          <li class="nav-item">
            <a mdbScrollSpyLink="section2" class="nav-link" href="#section2">Section 2</a>
          </li>
          <li class="nav-item">
            <a mdbScrollSpyLink="section3" class="nav-link" href="#section3">Section 3</a>
          </li>
          <li class="nav-item">
            <a mdbScrollSpyLink="section4" class="nav-link" href="#section4">Section 4</a>
          </li>
        </ul>
        <!-- Links -->
      </div>
      <!--Scrollspy-->
    </div>
    <!-- MAIN SECTION -->
    <div class="col-md-9 col-sm-8">
      <!-- HEADING -->
      <div class="raleway my-4">
        <h2 id="termsofservice" class="text-center">
          <span>TERMS OF SERVICE</span>
        </h2>
      </div>
      <p class="subtext text-center">
        Last updated September 16 2019
      </p>

      <section mdbScrollSpyWindow="scrollspy4" id="section1" class="p-5 blue lighten-4">
        <h3>Section 1</h3>
        <p class="mb-0">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis iure exercitationem
          mollitia fugit asperiores temporibus magnam perspiciatis. Repellat quisquam culpa odit!
          Dolore non consequuntur dignissimos adipisci tenetur debitis, quisquam culpa. Laborum
          officiis deserunt, assumenda pariatur vel dolorum provident beatae tenetur nihil quo dicta
          eius enim cumque reprehenderit voluptate nam aperiam eveniet et iusto at magni.
          Necessitatibus laborum assumenda consequuntur voluptate. Recusandae mollitia sequi in
          aperiam enim nesciunt incidunt, cumque ut voluptates ea nam quam beatae maxime voluptatem.
          Accusamus, animi vel eaque voluptatibus ipsam odio est, minus obcaecati praesentium nam
          iure!
        </p>
      </section>

      <section mdbScrollSpyWindow="scrollspy4" id="section2" class="p-5 red lighten-4">
        <h3>Section2</h3>
        <p class="mb-0">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis iure exercitationem
          mollitia fugit asperiores temporibus magnam perspiciatis. Repellat quisquam culpa odit!
          Dolore non consequuntur dignissimos adipisci tenetur debitis, quisquam culpa. Laborum
          officiis deserunt, assumenda pariatur vel dolorum provident beatae tenetur nihil quo dicta
          eius enim cumque reprehenderit voluptate nam aperiam eveniet et iusto at magni.
          Necessitatibus laborum assumenda consequuntur voluptate. Recusandae mollitia sequi in
          aperiam enim nesciunt incidunt, cumque ut voluptates ea nam quam beatae maxime voluptatem.
          Accusamus, animi vel eaque voluptatibus ipsam odio est, minus obcaecati praesentium nam
          iure!
        </p>
      </section>

      <section mdbScrollSpyWindow="scrollspy4" id="section3" class="p-5 green lighten-4">
        <h3>Subsection 1B</h3>
        <p class="mb-0">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis iure exercitationem
          mollitia fugit asperiores temporibus magnam perspiciatis. Repellat quisquam culpa odit!
          Dolore non consequuntur dignissimos adipisci tenetur debitis, quisquam culpa. Laborum
          officiis deserunt, assumenda pariatur vel dolorum provident beatae tenetur nihil quo dicta
          eius enim cumque reprehenderit voluptate nam aperiam eveniet et iusto at magni.
          Necessitatibus laborum assumenda consequuntur voluptate. Recusandae mollitia sequi in
          aperiam enim nesciunt incidunt, cumque ut voluptates ea nam quam beatae maxime voluptatem.
          Accusamus, animi vel eaque voluptatibus ipsam odio est, minus obcaecati praesentium nam
          iure!
        </p>
      </section>

      <section mdbScrollSpyWindow="scrollspy4" id="section4" class="p-5 indigo lighten-4">
        <h3>Section 4</h3>
        <p class="mb-0">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis iure exercitationem
          mollitia fugit asperiores temporibus magnam perspiciatis. Repellat quisquam culpa odit!
          Dolore non consequuntur dignissimos adipisci tenetur debitis, quisquam culpa. Laborum
          officiis deserunt, assumenda pariatur vel dolorum provident beatae tenetur nihil quo dicta
          eius enim cumque reprehenderit voluptate nam aperiam eveniet et iusto at magni.
          Necessitatibus laborum assumenda consequuntur voluptate. Recusandae mollitia sequi in
          aperiam enim nesciunt incidunt, cumque ut voluptates ea nam quam beatae maxime voluptatem.
          Accusamus, animi vel eaque voluptatibus ipsam odio est, minus obcaecati praesentium nam
          iure!
        </p>
      </section>
    </div>
  </div>
</div>

styles.scss:

.mdb-scrollspy-ex .nav-item {
  width: 100%;
}

.mdb-scrollspy-ex a {
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.1rem;
  padding: 0 5px;
  margin-top: 3px;
  margin-bottom: 3px;
  color: black;
}

#termsofservice {
  margin-top: 1rem;
  height: 5rem;
}
@media (min-width: 768px) {
  #abc {
    position: fixed;
    top: 0px;
    bottom: 0;
    left: 0;
    width: 25vw;
    overflow-y: scroll;
    margin-top: 200px;
    background-color: aqua;
    height: 60vh;
    padding-left: 5px;
  }
}

#sidebar {
  text-align: center;
  height: 60vh;
}

section {
  height: 100vh;
  margin-bottom: 1rem;
}

Hope it helps!

Best, Bartosz.


anuragd7 commented 5 years ago

Hi @Bartosz Termena Thanks for response. The scroll spy works in the code you shared but the problem is that it requires each item to be of the same size. In my case I have content of variable length(and hence height) on the pane on the right so having sections of same height does not work. I also checked out the dotted scroll-spy - but I need to be able to show some text in my scroll-spy to enable the user to see what she is choosing so this option also does not work. Is there any way in which scrollspy4 can handle content of variable height? Thanks


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.1.1
  • Device: mac
  • Browser: chrome
  • OS: OSX
  • Provided sample code: No
  • Provided link: Yes
Tags