Learn More, Pay Less!
Limited Time Offer!
Open Closed

Angular UI mobile issues #8713


User avatar
0
vd created
  • ABP Framework version: v9.0.4
  • UI Type: Angular

2 issues :

  • page scroll preserved
  • can't hide settings menu on mobile

Question already asked here and here

This is what it looks like with a fresh project :


3 Answer(s)
  • User Avatar
    0
    sumeyye.kurtulus created
    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?

  • User Avatar
    0
    vd created

    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 }];

  • User Avatar
    0
    sumeyye.kurtulus created
    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.

Made with ❤️ on ABP v9.2.0-preview. Updated on February 13, 2025, 10:35