Table Header Sticky

[RAMINCNZ]

Be great IF the Table Header was Sticky so one could still see it as one scrolls through Extensions.

Rick M
Nu Tirani - New Zealand

[Jefferson49]

That makes sense. I have already thought about fixing the table header during development of the module, but could not find a good example in webtrees to copy.

Now, I have tried to find some information with an internet and AI search. However, the approaches I found did not work. Maybe, need more detailed configuration.

Do you know an example of a webtrees view where the table header is fixed?

Maybe, I need to ask for help in the webtrees forum.

[RAMINCNZ]

The table has the id of wt-datatables-custom-module-manager-updates

So maybe use

#wt-datatables-custom-module-manager-updates thead { position: sticky; top: 0; }

[Jefferson49]

Well, I played around for some time and asked the AI for proposals. However, I was not successful. It seems to be more complicated than just adding one CSS statement. For example, if the head is sticky, there need to be some overflow/scroll directives for the other parts as well.

What it makes more complicated is that webtrees uses a Bootstrap library for the tables. I am no expert for this. Since I could not find a solution in a reasonable time, I will postpone this issue.

What would help most, would be some other webtrees table as an example to copy from.

[RAMINCNZ]

Ok I am seeing the possible issue here and do not know why it is so.

I have added the single line of css to an administrative css file that I have included in my own personal setup.. In other words to make this work it will need to 'override' administrative css which seems not to be able to be done by front end methods such as an extension module css (which cannot be so since it seems one can get to admin stuff using a an extension module).. If it is possible to alter control panel css somehow, that is the way to make that thead sticky..

My apologies as it has been a while since I actually fiddled with all this.. If this doesn't make sense let me know, I will try and figure out a better way to explain it.

Rick M

[Jefferson49]

Thanks for testing! I would be interested if you get some CSS for sticky headers running.

The CSS of Custom Module Manager can be found here:
https://github.com/Jefferson49/CustomModuleManager/blob/main/resources/css/custom-module-manager.css

Maybe, you can insert your CSS code there and see if it is working.

[RAMINCNZ]

The css file you mention is 'front-end' css and any css one wants to use to change the 'backend' (Control Panel etc) seems NOT to work.. I'm not sure if it is by design or just because the 'backend' is not as important as the 'frontend' so is treated differently.

The css code I supplied above should work if you, as an example) add it to the administration.phtml file
after the tag.

` <style>
#wt-datatables-custom-module-manager-updates thead {
position: sticky;
top: 0;
}

/* optional: ensure cells inherit thead text color */
#wt-datatables-custom-module-manager-updates thead.is-stuck th, #wt-datatables-custom-module-manager-updates thead.is-stuck td {
background: linear-gradient(135deg,#203e34 0%,#416b56 100%);
color: #fff;
}
</style>
`
The additional code I show changes the background and text colours when the 'thead' goes sticky. You would need to add the following js to the bottom of the administration.phtml file before the tag.

`<script>
(() => {
const table = document.querySelector('#wt-datatables-custom-module-manager-updates');
if (!table) return;

const thead = table.querySelector('thead');
if (!thead) return;

// Create a 1px sentinel right before the thead
const sentinel = document.createElement('div');
sentinel.style.position = 'absolute';
sentinel.style.left = '0';
sentinel.style.top = '0';
sentinel.style.width = '1px';
sentinel.style.height = '1px';
sentinel.style.pointerEvents = 'none';

// Put sentinel in the same offset context as thead
const parent = thead.parentElement;
parent.style.position = parent.style.position || 'relative';
parent.insertBefore(sentinel, thead);

// Move sentinel to the point where thead would start sticking
const rect = thead.getBoundingClientRect();
const topInPage = rect.top + window.scrollY;
sentinel.style.top = ${topInPage}px;

const obs = new IntersectionObserver(([entry]) => {
// When sentinel scrolls out of view, the header is in its sticky state
thead.classList.toggle('is-stuck', !entry.isIntersecting);
}, { threshold: 1 });

obs.observe(sentinel);

// Recompute on resize (optional but helps)
window.addEventListener('resize', () => {
const r = thead.getBoundingClientRect();
sentinel.style.top = ${r.top + window.scrollY}px;
});
})();
</script>`

It is a bit kludgy IMHO, but I don't know IF there is a better way of doing this. Well you could add a
<link rel="stylesheet" href="path to cssfile" line, and I'm guessing similar for the js as well..

What would be really cool would be if the colours could be grabbed from the current 'Theme' or such, and or maybe could be chosen manually!

I hope that makes better sense and you can get it going!

Rick M