My page content is overlapping onto my footer in Service Portal?

[patricklatella]

Hi all,

I'm developing our Service Portal, and I've created a new page that is displaying performance analytics widgets.  The issue I'm having is that the content from the page is overlapping the footer.  This is not happening on other pages in my portal.  Anyone know the fix?  thanks!

[Mike Patel]

Did you try adding background color to footer using css ?

[patricklatella]

hi Mike, thanks for the reply.  Yep, I did have the background color set in my CSS...this was only happening on the one page...so I'm guessing that since the new page had more objects (7 PA widgets), that the bottom 3 ended up with higher z-index values...so after I set the z-index value on the footer to a higher number, it became the top layer.  thanks again!

[Erik Stolberg · Accepted solution]

Likely an issue with the z-index. You could modify your "sp_header_footer" record to modify the z-index of the footer HTML. You would need to make your element(s) "positioned" though. More here: https://www.w3schools.com/cssref/pr_pos_z-index.asp

I added the following to a theme CSS file I apply to all of my portals (prevents content from ending up behind the footer which is 30px high):

.body {
  margin-bottom: 30px;
}

[patricklatella]

hi Erik, 

the z-index was the trick! I applied "z-index: 10;" to my footer class and it now works.

thanks!