Creating a sticky footer in your Service Portal

While developing web layouts, at some point you’ve probably run into the issue with the footer floating in the middle of the page just below the content. This can easily be fixed with a little CSS magic. Service Portal does support fixed headers and footers, but this causes the footer to stick to the browser window and overlap the content, which is not what we want. We want the footer to always be at the bottom of the page. This is called a “sticky footer”.
 stickyfooter
In between Helsinki and Istanbul some major changes were to made to the outer page structure that broke some earlier solutions posted on the community. My goal is to provide a solution that would work with all versions of Service Portal and it’s various supported browsers.

The Solution:

I’ve chosen to implement the sticky footer using Flexbox as this provides the most amount of flexibility. One added advantage of flexbox is that it also supports variable height footers, which many other solutions do not.
Installation:
  1. Go to your portals theme record.
  2. Select a footer widget, you can use the out-of-box “Sample Footer” as a test.
  3. Make sure the “Fixed footer” checkbox is unchecked.
  4. Paste the following snippet of CSS into the “CSS variables” textarea, or alternatively you can include it in a CSS Include.

It’s been tested on Helsinki, Istanbul, and Jakarta using Chrome, Safari 9+, IE10+.

For additional information on flexbox, you can check out the following resources:

  • A quick guide to flexbox by CSS-Tricks – here.
  • Solved by Flexbox, a website dedicated to cool flexbox techniques – here.
I hope you’ve picked up something new and useful from this article. Would love to hear your comments and questions in the comment section below.

3 comments

  1. Great post. I was wondering if there could be a solution to make the sticky footer work across different service-now versions and this perfectly does.
    I actually like the name “sticky footer”.

Leave a Reply

Your email address will not be published. Required fields are marked *