Service Portal: position: sticky or something similar

[Fabricio4]

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-]

Stuff can only be made sticky if the element to be made sticky has an ancestor that is scrolled.

It does not depend on support from "Portal".

Actually yourself correctly claim that it is supported by most browsers, so it depends on browsers (and being correctly implemented).

Indeed one can use it in Portal; here's a simple demonstration I just threw together:

As for JavaScript, one can use JavaScript in Portal to manipulate stuff as long as it does not step over the MVC paradigm of AngularJS and it is done - preferably - in the Link function of a widget.

Though direct DOM manipulation using JavaScript from outside of the underlying AngularJS framework should not be done.

As for UI Macros, those are server side entities/technology so one does not call those from any "page".
UI Macros are kinda' like functions, those can be called from within UI Pages and other UI Macros.

Both UI Pages and UI Macros can be viewed as the equivalent of PHP (or JSP, or ASP, a.s.o) which generate HTML server side.

UI Macros (and UI Pages) are meant to produce raw HTML (again, server side) and do not mix at all with Portal, because Portal is mostly client side technology.

Of course on could for instance insert a UI Page into an iframe hosted by a widget, but that is so scratching your left ear with your right foot.

But this is just FYI, as stated previously you can use sticky just fine in Portal as long as you use it as described by the "spec".

[Fabricio4]

Thanks for the detailed response, @-O- , including the video!

But bear with me for a little bit more, since as you can probably tell, this stuff is a bit new to me.

You mentioned that stuff can only be made sticky if the element to be made sticky has an ancestor that is scrolled. However, since we can't manipulate the HTML directly to deal with divs, does that mean on the context of Portal Pages I would need to put a column inside a container (which would be the ancestor) and then make the column the sticky element?

I tried doing that and giving the ancestral (container) the property overflow: auto, but it didn't work.

Thanks again!

[-O- · Accepted solution]

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.

[Fabricio4]

Got it. So I'd be better off cloning the widget that I want to use the sticky property. Thanks a lot for taking the time to enlighten me. I'll mark your answer as correct.