Sticky Footer - Service Portal

[boosted]

Hi,

Has anyone has luck getting a Sticky Footer created in Service Portal?

If I select the FIXED FOOTER option and try scrolling it keeps the footer in place at the bottom most part of the screen, if i scroll down it stays fixed at the bottom and the content of the page stays behind the footer vs being fluid with the various heights of the current page its on. And if there isn't a 100% full height content on the page and I don't have FIXED FOOTER selected it brings the footer to middle of the page after the last element. can't seem to figure out how to implement a "sticky footer".

I am trying to get the global css body element to be "min-height: 100%", I believe that would fix it but I'm not sure how to get that into the global portal css. I tried adding a CSS include to the current theme and that did not change anything.

here is what I am getting at:

thanks!

matt.metten

[mirkoe]

I ´m having this same problem. I have looked at the Bootsrap example, added z-index and tried various other css tricks. Anyone who has a solution to this?

[kvillalobos]

What I did was I added a container to my homepage where I was going to place my footer and gave that container the css class of footer.

Then on my css style sheet, I added the following css from the bootstrap example. Worked for me.

.footer {

1.     position: absolute;
2.     bottom: 0;
3.     width: 100%;
4.     height: 60px;
5.     background-color: #f5f5f5;

}

[cbissell]

Taking the footer suggestion above/the bootstrap page mentioned earlier and applying it to Service Portal you need to apply the CSS to the parent element rather than the footer CSS. To do this:

1. Open the Theme you've applied

2. Scroll down to the CSS Includes section

3. Create a New CSS Include by clicking the New button and filling out the fields

4. In the Style sheet field click the search button

5. In the Style Sheets pop up that appears click the New button

6. Name the CSS file and paste the following into the CSS field

html {

      position: relative;

      min-height: 100%;

}

main.body {

      min-height: 89.5vh; /* adjust to suit your page dimensions */

}

footer {

      position: relative;

      left: 0;

      bottom: 0;

      height: 30px; /* adjust to suit your footer dimensions */

      width: 100%;

}

7. Click Submit and then click Submit in the CSS Include window (ensure the new Style sheet populates in the Style sheet field as well)

8. Click Update

9. Confirm the footer works as intended cross browser and make any CSS adjustments required to suit your footer style

Please note although this forces the footer to the absolute bottom in instances where the page is smaller than the viewport, at least for me it doesn't force it to the bottom of the document. I'll update my suggestion after I look into it further

Edit: I feel it's a bit of a hacky solution but here is a method of making the footer sticky that is tested working across IE, Chrome and FF in my dev instance.

Edit 2: The solution provided by christophes. is the best so far.

Cheers guys

boosted

mirkoe

[scottstahr]

I tried setting the footer using absolute positioning but on pages where the content took up the whole page, the footer was applied on top of the content.   I discovered that the section of the page where the content is stored is "section.body.padding-top".   You need to set that to have a minimum height so it expands if there isn't enough content to fill the page.   I was able to get the sticky footer to work with the following CSS code.   The footer is applied through the theme and the CSS is attached to the theme in the CSS related list.

html {

  position: relative;

  min-height: 100%;

}

body {

  margin-bottom: 150px;

}

footer {

  position: relative;

  bottom: 0;

  width: 100%;

  height: 150px;

}

section.body.padding-top {

  min-height: 65vh;

}

[Community Alums]

Hello Altamish,

we had the same problem on our portal and we chose the solution proposed by the CSS Flexbox module which is used in Service Portal.

For this, we have added this code in a theme CSS include and it works perfectly.

section.page {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

}

section.page .body {

  -webkit-box-flex: 1;

  -ms-flex-positive: 1;

  flex-grow: 1;

}

Best Regards

Christophe