How to remove top-padding from page when using eLayoutType.empty while keeping View Encapsulation? #3926

4 Answer(s)

• 

  0

  enisn created 3 years ago

  Support Team .NET Developer

  Firstly, which Theme are you currently using? Lepton, LeptonX, Basic

  Which version are you currently using? 6.0.0, 5.3.5 etc.

  Which UI type? Angular, MVC, Blazor Server, Blazor Wasm

  Save Cancel
• 

  0

  jeflux created 3 years ago

  Firstly, which Theme are you currently using? Lepton, LeptonX, Basic

  Which version are you currently using? 6.0.0, 5.3.5 etc.

  Which UI type? Angular, MVC, Blazor Server, Blazor Wasm

  5.3.4 Angular with Lepton them.

  Save Cancel
• 

  0

  muhammedaltug created 3 years ago

  Hello,

  Can you modify your app.component.ts with following

  import { DynamicLayoutComponent, eLayoutType, RouterEvents } from '@abp/ng.core';
  import { AfterViewInit, Component, RendererFactory2, ViewChild } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    template: `
      <abp-loader-bar></abp-loader-bar>
      <abp-dynamic-layout></abp-dynamic-layout>
    `,
  })
  export class AppComponent implements AfterViewInit {
    @ViewChild(DynamicLayoutComponent, { static: false }) dynamicLayout: DynamicLayoutComponent;
  
    constructor(private rendererFactory: RendererFactory2, private routerEvents: RouterEvents) {}
  
    ngAfterViewInit(): void {
      const navigationEnd$ = this.routerEvents.getNavigationEvents('End');
      navigationEnd$.subscribe(() => {
        if (this.dynamicLayout.layoutKey === eLayoutType.empty) {
          this.rendererFactory
            .createRenderer(document.body, null)
            .addClass(document.body, 'empty-layout');
        } else {
          this.rendererFactory
            .createRenderer(document.body, null)
            .removeClass(document.body, 'empty-layout');
        }
      });
    }
  }
  

  And please add the following style to your style file

  .empty-layout {
    padding-top: 0;
  }
  

  Save Cancel
• 

  0

  jeflux created 3 years ago

  Hello,

  Can you modify your app.component.ts with following

  import { DynamicLayoutComponent, eLayoutType, RouterEvents } from '@abp/ng.core'; 
  import { AfterViewInit, Component, RendererFactory2, ViewChild } from '@angular/core'; 
   
  @Component({ 
    selector: 'app-root', 
    template: ` 
      <abp-loader-bar></abp-loader-bar> 
      <abp-dynamic-layout></abp-dynamic-layout> 
    `, 
  }) 
  export class AppComponent implements AfterViewInit { 
    @ViewChild(DynamicLayoutComponent, { static: false }) dynamicLayout: DynamicLayoutComponent; 
   
    constructor(private rendererFactory: RendererFactory2, private routerEvents: RouterEvents) {} 
   
    ngAfterViewInit(): void { 
      const navigationEnd$ = this.routerEvents.getNavigationEvents('End'); 
      navigationEnd$.subscribe(() => { 
        if (this.dynamicLayout.layoutKey === eLayoutType.empty) { 
          this.rendererFactory 
            .createRenderer(document.body, null) 
            .addClass(document.body, 'empty-layout'); 
        } else { 
          this.rendererFactory 
            .createRenderer(document.body, null) 
            .removeClass(document.body, 'empty-layout'); 
        } 
      }); 
    } 
  } 
  

  And please add the following style to your style file

  .empty-layout { 
    padding-top: 0; 
  } 
  

  Easy peasy! Thank you!

  Save Cancel