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 aragorn
Is there a HTML element that has .footer class in template property?

Details; https://angular.io/guide/component-styl ... ent-styles