Sticky footer

Post Reply
driga
Posts: 10
Joined: 03 Oct 2016, 20:58

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

merve7
Posts: 316
Joined: 12 Sep 2017, 10:44

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>

driga
Posts: 10
Joined: 03 Oct 2016, 20:58

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.

cagatay.civici
Prime
Posts: 17996
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

01 Dec 2017, 11:16


driga
Posts: 10
Joined: 03 Oct 2016, 20:58

01 Dec 2017, 11:21

Thanks

cagatay.civici
Prime
Posts: 17996
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

01 Dec 2017, 12:02

You are welcome.

krisp
Posts: 5
Joined: 04 Jan 2018, 18:05

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

User avatar
aragorn
Posts: 3215
Joined: 29 Jun 2013, 12:38

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

Post Reply

Return to “Atlantis - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest