Sticky Footer

Forum rules
Please note that response time for technical support is within 3-5 business days.
iecisa
Posts: 7
Joined: 21 Mar 2018, 10:02

26 Mar 2018, 12:47

We would like to get a sticky footer in manhattan theme. We've tried several configurations in css file, but no result. Can anyone help us?

kubrasulukan
Posts: 87
Joined: 10 Jan 2018, 16:04

28 Mar 2018, 08:36

Please try following css code.

Code: Select all

.layout-wrapper .layout-main .layout-footer {
    position: fixed;
    bottom: 0;
    right: 0;
    width: calc(100% - 90px);
    z-index: 100;
  }
Best Regards

iecisa
Posts: 7
Joined: 21 Mar 2018, 10:02

02 Apr 2018, 11:39

Thanks a lot for the answer. We already had tested this configuration, but, footer has a fixed position so when content grow up, footer cover it. What we need, is footer always appears after the content.

kubrasulukan
Posts: 87
Joined: 10 Jan 2018, 16:04

03 Apr 2018, 16:00

Well, you asked for a sticky footer on your initial post. After your last answer, we understand that you're requesting the footer behaviour that is already default footer behaviour of Manhattan theme. (Check the live demo: http://primefaces.org/manhattan/ ) Can you please give a detailed information about your request; mockup or something visual would be great for us to understand.

Best regards,

iecisa
Posts: 7
Joined: 21 Mar 2018, 10:02

03 Apr 2018, 19:08

Thanks a lot again for the answer. Sorry, i've must not had explain it correctly. With your configuration, footer stay in a fixed position, always. What we need is, initially, it must appear fixed at the bottom, but it must to relocate at the end of the content, at the same time that this content grows up.

Best regards

kubrasulukan
Posts: 87
Joined: 10 Jan 2018, 16:04

11 Apr 2018, 14:57

I believe you need a javascript solution, css only cannot help out. On load the script needs to calculate if content goes out of the viewport, if it does it pushed the footer after the content, if not it becomes sticky. You also need to consider dynamic content like ajax updates. Overall a css+js solution is what you need.

Babas007
Posts: 251
Joined: 24 May 2011, 09:42

22 May 2018, 17:02

I saw that post, and I had to reply since I had the same problem with Barcelona...

You can try this: https://css-tricks.com/couple-takes-sticky-footer/

I never heard about using javascript though. It would be awesome if PF Team could provide that by default in their theme

kubrasulukan
Posts: 87
Joined: 10 Jan 2018, 16:04

04 Jun 2018, 08:12

Thank you! I'll research it.

iecisa
Posts: 7
Joined: 21 Mar 2018, 10:02

15 Nov 2018, 14:30

Solved!!!! :) Just modify css in this way:

.layout-wrapper .layout-main .layout-footer {
border: 1px solid #dee4e9;
background-color: #ffffff;
padding: 5px 5px;
bottom: 0px;
position: fixed;
width: calc(100% - 40px);
-moz-transition: width 0.3s;
-o-transition: width 0.3s;
-webkit-transition: width 0.3s;
transition: width 0.3s;
-webkit-box-shadow: 0 1px 10px 0 rgba(182, 183, 195, 0.5);
-moz-box-shadow: 0 1px 10px 0 rgba(182, 183, 195, 0.5);
box-shadow: 0 1px 10px 0 rgba(182, 183, 195, 0.5);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 999997;
}

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

15 Nov 2018, 15:15

Thanks a lot for the update!

Post Reply

Return to “Manhattan - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests