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
Sticky footer
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
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
also, footer comes out of the layout-main class like that;
in app.component.html
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
}
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>
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.
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.
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
You are welcome.
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
@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
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Is there a HTML element that has .footer class in template property?
Details; https://angular.io/guide/component-styl ... ent-styles
Details; https://angular.io/guide/component-styl ... ent-styles
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 13 guests