Page 1 of 1
Sticky footer
Posted: 30 Sep 2017, 12:38
by driga
Could anyone help me with the code to have the footer stick to the bottom of the page ?
This should only happen if the content height is smaller than the page height, otherwise the footer should stick to the end of the content (so no overlay).
I've been trying several options (
https://css-tricks.com/couple-takes-sticky-footer/) but the main problem I have is the padding on the .layout-main class.
Thanks
Re: Sticky footer
Posted: 04 Oct 2017, 10:00
by merve7
Do you explain what you mean by " the main problem I have is the padding on the .layout-main class."?
Also, you can try this for sticky footer;
in _main.scss
Code: Select all
.footer{
position: fixed;
bottom: 0px;
width:100%;
z-index: 102;
//other codes
}
also, footer comes out of the layout-main class like that;
in app.component.html
Code: Select all
<app-topbar></app-topbar>
<app-sidebar></app-sidebar>
<div class="layout-main">
<div class="layout-main-content">
<router-outlet></router-outlet>
</div>
</div>
<app-footer></app-footer>
Re: Sticky footer
Posted: 08 Oct 2017, 08:00
by driga
Thanks for this code.
It's not the type of footer I'd like unfortunately.
This footer is on top of the content / menu (higher z-index), and the footer I'd like should be part of the content.
It should be at the bottom of the page when the content is less heigh than the total page height, should be at the bottom of the content when the content is bigger than the page height.
Would be highly appreciated if this could be solved.
Re: Sticky footer
Posted: 01 Dec 2017, 11:16
by cagatay.civici
Re: Sticky footer
Posted: 01 Dec 2017, 11:21
by driga
Thanks
Re: Sticky footer
Posted: 01 Dec 2017, 12:02
by cagatay.civici
You are welcome.
Re: Sticky footer
Posted: 25 Apr 2018, 18:16
by krisp
The CSS provided in the reply works great for a sticky footer. To be clear, I had to use an inline style in the footer component metadata. Like this:
@Component({
selector: 'app-footer',
template: `yada yada yada`,
styles: ['.footer { position: fixed; bottom: 0px; width:100%; z-index: 102; }']
})
export class AppFooterComponent {
}
I still have a problem though... I was not able to get any changes to the full sass files to take effect. Edits to asset/sass/layout scss files would not appear in chrome. I don't know why (just yet). So I'm missing something about either the style implementation or the way sass is transpiled and packaged for deploy. If/when I figure that part out will post again.
Kris
Re: Sticky footer
Posted: 22 May 2018, 10:03
by mert.sincan
Is there a HTML element that has .footer class in template property?
Details;
https://angular.io/guide/component-styl ... ent-styles