Unanswered

How to make the list header sticky when scroll

(0) Share

Report

Posted on by jwnz

111

Want to make the below highlighted list header section sticky on top when scrolling the page down, and tried to add the below CSS into the list table's th > tr element, but not working, is this doable in Power Pages?

style="position: sticky; top: 0; z-index: 1030; background-color: #fff!important;"

Categories:

General topics

I have the same question (0)

All responses (3)

Answers (0)

Sort by

Fubar 8,487 Super User 2026 Season 1 on at

Like (0)

Report
Copy link

Link copied!
I don't know how much luck you will have getting exactly what you want but in general:
You can't set sticky on tr tags you need to set them on each column heading th tag inside the tr e.g on each th apply position: sticky; top:0;
You will also have to override other values, for the List there is a class that sits on a div higher in the DOM called "view-grid", this class contains values that will stop the sticky on the th e.g. in the Browser Console for a standard list without any filtering or search turned on etc just a plain list if you add the sticky settings to the column th tags and remove the view-grid class from the div you will see the column headings go sticky. (I will leave it to you to find out what other values you need to override)

Was this reply helpful? Yes No
jwnz 111 on at

Like (0)

Report
Copy link

Link copied!
Hi @Fubar ,

I guess I have got it working by uploading the below custom CSS:
/*! sticky header */ .entity-grid .view-grid { overflow: auto; height: 600px; } .entity-grid .view-grid th { top: 0; position: sticky; background-color: #FFFFFF; z-index: 1000; }

How to upload CSS file:
https://learn.microsoft.com/en-us/power-pages/getting-started/tutorial-add-custom-style

Thanks

Was this reply helpful? Yes No
Fubar 8,487 Super User 2026 Season 1 on at

Like (0)

Report
Copy link

Link copied!
if
.entity-grid .view-grid
is defined in one of the out of the box CSS files, then you may want to put !important at the end of each element inside that class (we have no control over the order that Web Files getting read in from the portals cache, so is possible the order changes with future updates etc so better to be safe than sorry)

Was this reply helpful? Yes No