Service Portal: position: sticky or something similar

Fabricio4 · ‎12-22-2023

Hi!

So, I'm trying to use the "sticky" property in a CSS of a Service Portal Page, but it doesn't seem like it's supported by ServiceNow? Here's the effect (supported by most browsers) in question:

https://www.youtube.com/shorts/wdAkpswmnpo

So, I'm considering an alternative using javascript. But here's my question, how do I go around doing that if I can't manipulate the HTML of the page? And where would I put the code to work on that specific page? If I used an UI macro, where on the page would I call the macro? Only in a widget? I'd like to avoid call it by widget if possible, instead using the page itself.

Any other alternatives are very welcome.

Thanks!

-O- · ‎12-22-2023

I'm not sure how that would work as I don't think you can make a column scroll inside a container.

Of course, if you could make a column scroll inside a container, than it would be fair game.

Both a container and a column in a portal page are governed by Bootstrap styling.

I don't think it is worth messing with that.

But you can (and my advice would be that you should) take this to the widget level.

That is what I did.

I created a page with a container in it, which had (12 width) column in it, which had a widget in it which had as Body HTML template:

<div>
	<p>A paragraph</p>
	<p>A paragraph</p>
	<p>A paragraph</p>
	<p>A paragraph</p>
	<p style="background-color: red; color: white; font-weight: bold; position: sticky; top: 1em;">This will stick</p>
	<p>A paragraph</p>
	<!--
		the same paragraph many times, so that it makes the parent div scroll it's content.
	-->
	<p>A paragraph</p>
</div>

This is how I would do it and it would perfectly fit the Portal/AngularJS/Bootstrap paradigm.

Should you need to place/embed other widgets into the page, just do that inside this "master" widget.

View solution in original post

Fabricio4 · ‎12-24-2023

To be fair, at least the position-sticky utility from Bootstrap isn't available in Servicenow, as it uses an older version of Bootstrap (while position-sticky was introduced in Bootstrap 4, I believe). So, the only solution would be to use CSS or javascript. I'm currently trying to implement a client script within the widget itself as a workaround, let's see.