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

[nathanfirth]

Yes, we have this on most of our Service Portals. There is an example provided by Bootstrap that you can use as a reference:

https://getbootstrap.com/examples/sticky-footer/

[boosted]

I've been dissecting that page for a while now. copied over the HTML and CSS with no luck.

it seems like on the bootstrap example page as soon as I disable   "min-height: 100%" the footer moves out of place. now I'm trying to add that statement into the Service Portal CSS, not sure how to add that to the global css so it goes on every page. I even tried adding it to page specific CSS with no luck.

html {

  min-height: 100%

}

-----------------------------
bootstrap example:

HTML:

<footer class="footer">

      <div class="container">

              <p class="text-muted">Place sticky footer content here.</p>

      </div>

</footer>

CSS:

/* Sticky footer styles

-------------------------------------------------- */

html {

  position: relative;

  min-height: 100%;

}

body {

  /* Margin bottom by footer height */

  margin-bottom: 60px;

}

.footer {

  position: absolute;

  bottom: 0;

  width: 100%;

  /* Set the fixed height of the footer here */

  height: 60px;

  background-color: #f5f5f5;

}

[mattmccullough]

Knowing that this is the code we need:

html {

min-height: 100%;

}

I've tried adding this into a custom css file into the theme. Where it says "Css Includes".   Putting in this code does not change the view at all.   Where does it go to globally affect every page on the portal?

Thanks,

- Matt

https://mattmccullo.com

[tillu]

Hello all,

In the footer's css just add -           z-index: 100;

That solved our overlaying issue.