Note: As of the April 2021 update, this improved CSS implementation for sticky headers is now built into *all table-based Bootstrap templates by using the ‘Lock Table Header on Screen’ app property in ‘Edit Properties’. Any new applications will have this property readily available; No further action is required. Existing applications will need their Edit Properties reset and need a rebuild with an HTML overwrite. The following documentation is applicable for those on an m-Power release prior to April 2021.
Often times in grid (table) based templates, developers want to ensure that the header row on a table “sticks” with the data as a user scrolls down the page. All Reports utilize this feature, available via the Application Property ‘Lock Table Header on Screen’. For non-Report Bootstrap applications, the ‘Lock Table Header on Screen’ property does not exist. Instead, use the following snippet of CSS code to create a sticky header for your data table. Please insert the CSS code into the <head></head> section of your application HTML. Note, this CSS rule can also be applied to your dictionary stylesheet.
<style type="text/css">
.tableFixHead {
overflow-y: auto;
height: 200px;
}
.tableFixHead table {
border-collapse: collapse;
width: 100%;
}
.tableFixHead th,
.tableFixHead td {
padding: 8px 16px;
}
.tableFixHead th {
position: sticky;
top: 45px;
background: #fff;
}
</style>To have a the data table use this sticky header, you will need to add the ‘tableFixHead’ (without the quotes) to the list of classes on the <table> element.
