how can i make a Sticky Footer in the service portal?

[D_ Nistal]

Hi,

I'm trying to make a sticky footer on my personal Orlando instance but i cant get a satisfactory solution. I've tried all the sticky footer examples exposed in this other community post (https://community.servicenow.com/community?id=community_question&sys_id=bc1e0faddb9cdbc01dcaf3231f96...) but none of these solutions did work for me.

Here's a photo of my non-working sticky footer:

Thank you.

[Satyanarayana C]

Hi,

On the theme record, you have two options, fixed header and fixed footer. This will make the footer sticky.

Thanks

[D_ Nistal]

Thank you satyach for your answer but it doesn't resolve my problem. The "Fixed footer" check just sets fixedly the footer, even if i scroll down the footer doesn't move.

The Sticky footer i want behaves like this:

(ref:https://css-tricks.com/couple-takes-sticky-footer/)

[Nhat Nguyen]

Any way to do this without changing anything in the HTML?

[Kiran Teja1]

Hello Nistal

Yes this is a common issue if you use the fixed Header and Footer. In order to create a sticky footer I would suggest to make some changes to the CSS of your footer.

The below sample footer which I tried in Orlando version and it working fine.

HTML:

 <div class="sample-footer">	
  ${© Copyright of Company Group {{::c.data.time}}}
 </div>

 CSS:

.sample-footer {
  position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: black;
   color: white;
   text-align: center;
   padding: 26px 15px;
}

Result :

You can also search for more information regarding Sticky footers below

https://startbootstrap.com/snippets/sticky-footer-flexbox

I hope this information will be helpful. Please mark this answer as correct or helpful if this helps you.

Best Regards

Kiran Teja