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)
-
0
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
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.
-
0
Hello,
Can you modify your
app.component.ts
with followingimport { 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; }
-
0
Hello,
Can you modify your
app.component.ts
with followingimport { 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!