Topic: Scrollspy - mdbScrollspyLink attribute binding not working

Savic priority asked 1 year ago


Dear support,

I'm having issue with scrollspy. Attribute binding for mdbScrollspyLink is not working. I am using scrollspy for fixed elements and for dynamically created elements. Here is code example:

           <div id="scrollspy">
            <ul mdbScrollspy="tocScrollspy" class="nav flex-column menu-sidebar">

              <!-- Release Info -->
              <li class="nav-item">
                <a class="nav-link toc-link" mdbScrollspyLink="releaseInfo">{{'SOFTWARE.SOFTWARE_RELEASES.RELEASE_INFO.HEADER' | translate}}</a>
              </li>
              <!-- Downloads -->
              <li class="nav-item">
                <a class="nav-link toc-link" mdbScrollspyLink="downloads">{{'SOFTWARE.SOFTWARE_RELEASES.DOWNLOADS.HEADER' | translate}}</a>
              </li>
              <!-- What's New (features) -->
              <li class="nav-item">
                <a class="nav-link toc-link" mdbScrollspyLink="whatsNew">{{'SOFTWARE.SOFTWARE_RELEASES.FEATURES.HEADER' | translate}}</a>
                <ul mdbScrollspy="featuresScrollspy" class="nav flex-column ps-3" *ngIf="selectedProductReleaseDetails!.productFeatures!.length > 0">
                  <li class="nav-item" *ngFor="let feature of selectedProductReleaseDetails!.productFeatures">
                    <a class="nav-link toc-link" [mdbScrollspyLink]="feature.id">{{feature.title}}</a>
                  </li>
                </ul>
              </li>
               <!-- Bug & Issue Fixes -->
              <li class="nav-item">
                <a class="nav-link toc-link" mdbScrollspyLink="bugIssueFixesSection">{{'SOFTWARE.SOFTWARE_RELEASES.BUG_AND_ISSUE_FIXES.HEADER' | translate}}</a>
              </li>
              <!-- Migration -->
              <li class="nav-item">
                <a class="nav-link toc-link" mdbScrollspyLink="migration">{{'SOFTWARE.SOFTWARE_RELEASES.PREREQUISITES.HEADER' | translate}}</a>
              </li>
               <!-- Prerequisites -->
              <li class="nav-item">
                <a class="nav-link toc-link" mdbScrollspyLink="prerequisites">{{'SOFTWARE.SOFTWARE_RELEASES.PREREQUISITES.HEADER' | translate}}</a>
              </li>
                <!-- Compatibility -->
              <li class="nav-item">
                <a class="nav-link toc-link" mdbScrollspyLink="compatibility">{{'SOFTWARE.SOFTWARE_RELEASES.COMPATIBILITY.HEADER' | translate}}</a>
              </li>
              <!-- 3rd Party Hotfixes --> 
              <li class="nav-item">
                <a class="nav-link toc-link" mdbScrollspyLink="thirdPartyHotfixes">{{'SOFTWARE.SOFTWARE_RELEASES.3RD_PARTY_HOTFIXES.HEADER' | translate}}</a>
              </li>
            </ul>
           </div>

If I inspect html in the browser, mdbScrollspyLink attribute is missing. I already check, genearted feature.id is valid (e.g. feature_1). Is this supported? How to solve this?

Also, I am getting a lot of errors in the console: - Cannot read properties of null (reading 'scrollTop') - Cannot read properties of null (reading 'style')

What is the cause if this issues?

Best regards, Novak


Rafał Seifert free commented 1 year ago

Have you tried copying our basic example from docs and implementing your code on top of it? Do you have all necessary imports? If this does not help please edit your request and provide the rest of the code because you have supplied us with only part of scrollspy implementation and we can not recreate the problem.



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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 5.0.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No