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

jeflux created one year ago

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.

Go to accepted answer

4 Answer(s)

0

enisn created one year 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
0

jeflux created one year 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.

muhammedaltug created one year 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: `
    &lt;abp-loader-bar&gt;&lt;/abp-loader-bar&gt;
    &lt;abp-dynamic-layout&gt;&lt;/abp-dynamic-layout&gt;
  `,
})
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;
}

jeflux created one year 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: ` 
    &lt;abp-loader-bar&gt;&lt;/abp-loader-bar&gt; 
    &lt;abp-dynamic-layout&gt;&lt;/abp-dynamic-layout&gt; 
  `, 
}) 
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!

Have an answer to this question? Log in and write your answer.

Assignee

muhammedaltug

Labels