How to make the header section Sticky of a Silverstripe GridField in the CMS

Question

I have a Silverstripe 4 website which I want to have a sticky header to the GridFields. Once I scroll down the header should be on top.

I tried adding custom css but it did nothing:

Controller:

$extraFieldsConf = GridFieldConfig_RecordEditor::create();
$extraFieldsConf->addExtraClass('my-sticky-gridfield');

CSS:

.my-sticky-gridfield .grid-field__table thead {
    position: sticky !important;
    top: 0 !important;
    background-color: white !important;
    z-index: 100 !important;
}

Answer 1

Have you checked in the browser dev tools that the 'my-sticky-gridfield' class is actually added? I think the GridFieldConfig_RecordEditor doesn't have an addExtraClass method.

So, you could use the fieldset id in combination with the row (e.g. '.sortable-header') you want to have sticky.

Have you had a look at the documentation about how to Include custom CSS in the CMS?