Footer missing in paradise demo

Post Reply
koesper
Posts: 4
Joined: 20 Feb 2017, 09:41

17 Aug 2017, 14:39

Most themes have a footer bar in their demo, but it appears missing from the paradise theme.

for instance:
https://www.primefaces.org/morpheus-ng/#/file - a copyright line
https://www.primefaces.org/paradise-ng/#/file - nothing below the file card

I've been able to copy it back in, using morpheus or ultima as an example, but its probably easy to put back in.

Code: Select all

<app-footer>
    <div class="footer">
        <div class="card clearfix">
            <span class="footer-text-left">PrimeNG ULTIMA for Angular</span>
            <span class="footer-text-right"><span class="ui-icon ui-icon-copyright"></span>  <span>All Rights Reserved</span></span>
        </div>
    </div>
</app-footer>
If you add it back in, it just hovers below the content, wouldnt it be nicer to have it 'sticky' to the bottom?

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

18 Aug 2017, 10:19

Added footer component to Paradise for next version. Please try;

Code: Select all

...
template: `
        <div class="layout-footer clearfix">
            <img src="assets/layout/images/logo-gray.png">
            <div class="layout-footer-right">
                <a href="https://github.com/primefaces"><i class="fa fa-github"></i></a>
                <a href="https://www.facebook.com/groups/primefaces"><i class="fa fa-facebook"></i></a>
                <a href="http://twitter.com/primefaces"><i class="fa fa-twitter"></i></a>
            </div>
        </div>
    `
 ...

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

18 Aug 2017, 10:39

If you add it back in, it just hovers below the content, wouldnt it be nicer to have it 'sticky' to the bottom?
- Please try;

Code: Select all

import {Component} from '@angular/core';

@Component({
    selector: 'app-footer',
    template: `
        <div class="layout-footer clearfix fixedFooter">
            <img src="assets/layout/images/logo-gray.png">
            <div class="layout-footer-right">
                <a href="https://github.com/primefaces"><i class="fa fa-github"></i></a>
                <a href="https://www.facebook.com/groups/primefaces"><i class="fa fa-facebook"></i></a>
                <a href="http://twitter.com/primefaces"><i class="fa fa-twitter"></i></a>
            </div>
        </div>
        <div class="layout-footer clearfix" style="height:35px"></div>
    `
})
export class AppFooter {

}

Code: Select all

<style>
            body .fixedFooter {
                position: fixed; 
                bottom: 0px; 
                width: calc(100% - 240px); 
                box-sizing: border-box; 
                z-index: 99;
            }

            body .layout-menu-static-inactive .fixedFooter,
            body .layout-menu-overlay .fixedFooter {
                width: 100%;
            }

            @media(max-width: 640px) {
                body .layout-menu-static .fixedFooter {
                    width: 100%;
                }
            }

            body .layout-menu-slim .fixedFooter {
                width: calc(100% - 75px); 
            }
</style>

User avatar
optimus.prime
Prime
Posts: 17555
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

08 Sep 2017, 16:32

We'll add it to the upcoming version after PrimeNG 4.2.0 is released next week. Paradise will also get menu enhancements, version updates and footer.

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest