Angular UI mobile issues #8713

3 Answer(s)

• 

  0

  sumeyye.kurtulus created 3 months ago

  Support Team Angular Expert

  Hello, you can use this key eThemeLeptonXComponents.MobileNavbarSettings to manage the mobile navbar settings. May I also ask how you have added the FAQ component that would result in a scroll problem?

  Save Cancel
• 

  0

  vd created 3 months ago

  Hello, you can use this key eThemeLeptonXComponents.MobileNavbarSettings to manage the mobile navbar settings.

  It works. Thank you.

  May I also ask how you have added the FAQ component that would result in a scroll problem?

  home.component.ts <a [routerLink]="'/faq'" class="btn btn-primary">FAQ</a>

  app-routing.module.ts { path: 'faq', loadChildren: () => import('./faq/faq.module').then(m => m.FaqModule) },

  faq-routing.module const routes: Routes = [{ path: '', component: FaqComponent }];

  Save Cancel
• 

  0

  sumeyye.kurtulus created 3 months ago

  Support Team Angular Expert

  Hello again, thank you for bringing this to our attention. We appreciate your detailed explanation. We are working on a fix for an upcoming release.

  In the meantime, as a temporary workaround, I recommend using the following approach to overcome the problem:

  import { Component, inject, OnInit } from '@angular/core';
  import { DOCUMENT } from '@angular/common';
  
  @Component({
    selector: 'app-faq-routing',
    standalone: true,
    imports: [],
    templateUrl: './faq-routing.component.html',
    styleUrl: './faq-routing.component.scss'
  })
  export class FaqRoutingComponent implements OnInit{
  
    protected readonly document = inject(DOCUMENT);
  
    ngOnInit(): void {
      this.forceScrollToTop();  
    }
    
    forceScrollToTop(): void { 
      const scrollableContainer = this.document.querySelector(
        '.lpx-content-container',
      ) as HTMLElement;
  
      if (!scrollableContainer) {
        return;
      }
  
      if (scrollableContainer.scrollTop === 0) {
        return;
      }
  
      scrollableContainer.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth',
      });
    }
  }
  

  Let me know if you need further clarification or assistance.

  Save Cancel