Prime Community Forum

Posted: **30 Sep 2017, 12:38**

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

Posted: **04 Oct 2017, 10:00**

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>

Posted: **08 Oct 2017, 08:00**

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.

Posted: **01 Dec 2017, 11:16**

Following link could help;

https://css-tricks.com/couple-takes-sticky-footer/

Posted: **01 Dec 2017, 11:21**

Thanks

Posted: **01 Dec 2017, 12:02**

You are welcome.

Posted: **25 Apr 2018, 18:16**

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

Posted: **22 May 2018, 10:03**

Is there a HTML element that has .footer class in template property?

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

Prime Community Forum

Sticky footer

Sticky footer

Re: Sticky footer

Re: Sticky footer

Re: Sticky footer

Re: Sticky footer

Re: Sticky footer

Re: Sticky footer

Re: Sticky footer