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.
-
- Posts: 87
- Joined: 10 Jan 2018, 16:04
Please try following css code.
Best Regards
Code: Select all
.layout-wrapper .layout-main .layout-footer {
position: fixed;
bottom: 0;
right: 0;
width: calc(100% - 90px);
z-index: 100;
}
-
- Posts: 87
- Joined: 10 Jan 2018, 16:04
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,
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
Best regards
-
- Posts: 87
- Joined: 10 Jan 2018, 16:04
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
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
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;
}
.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;
}
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Thanks a lot for the update!
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest