Prime Community Forum

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?

Please try following css code.
Best Regards

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.

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,

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

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.

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

Thank you! I'll research it.

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;
}

Thanks a lot for the update!