Open Closed

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


User avatar
0
jeflux created

When setting the route layout type to eLayoutType.Empty we can completely hide the toolbars so that view appears as more of a standalone application. However, I cannot get ride of the top margin unless I set the component ViewEncapsulation to None and apply a padding setting such as:

.abp-application-layout {
    padding-top: 0 !important;
}

Of course this is wrong, but I can't seem to get rid of the 68px top padding of the body element. As a result, when my component loads in the empty layout, I have a big white space at the top of the page.


4 Answer(s)
  • User Avatar
    0
    enisn created
    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

  • User Avatar
    0
    jeflux created

    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.

  • User Avatar
    0
    muhammedaltug created

    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;
    }
    
  • User Avatar
    0
    jeflux created

    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!

Made with ❤️ on ABP v9.1.0-preview. Updated on November 11, 2024, 11:11