Sticky Header for MDK App

[lokesh_kamana]

Requirement- Set sticky position for control inside sectioned table extension control.

Extension control is created from IControl.

StackLayout --> GridLayout --> Rows, Columns

Want to make Row 0 which has column headings needs to be sticky and other rows can scroll. Currently we are getting scroll for the entire page and they lose to see the heading when there is more data.

We have added below css for Row 0 which is not working-

.disable-scroll {

position: sticky;

}

[bill_froelich]

Are you using your extension control within a section table where you have other sections before or after the extension section or is the extension control the only thing on the page?

[lokesh_kamana]

Hi Bill,

We are using extension within section table where we have other sections as well before our extension.

Extension will return ‘StackLayout’ which is our main container layout.

We are using ‘GridLayout’ to create table inside our main container. First row of the ‘GridLayout’ is used for column names. We want to make this row fixed/sticky position so that users only scroll the other rows which contain table data.

We are using ‘Label’ control for column names. We tried adding css with ‘top:0; position: sticky;’ to the ‘Label’ control.

Regards,

Lokesh.

[bill_froelich]

If your control is supporting scrolling within the extension control the it would be up to your control to determine how scrolling is handled within the control. Since you have sections other than the extension, the page scrolling will need to scroll the section accordingly to be able to view other sections on the page.