{"id":10643,"date":"2020-02-07T17:00:13","date_gmt":"2020-02-07T23:00:13","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/techblog\/?p=10643"},"modified":"2023-06-21T13:30:40","modified_gmt":"2023-06-21T19:30:40","slug":"creating-a-sticky-header-in-bootstrap-reports","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/techblog\/?ht_kb=creating-a-sticky-header-in-bootstrap-reports","title":{"rendered":"Creating a sticky header in Bootstrap Applications"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>Often times in grid (table) based templates, developers want to ensure that the header row on a table &#8220;sticks&#8221; with the data as a user scrolls down the page. All Reports utilize this feature, available via the Application Property &#8216;Lock Table Header on Screen&#8217;. <\/p>\n\n\n\n<p>For non-Report Bootstrap applications, the &#8216;Lock Table Header on Screen&#8217; property does not exist. Instead, use the following snippet of CSS code to create a sticky header for your data table. <\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-alert\"><em><strong>Note<\/strong>: As of the April 2021 update, this improved CSS implementation for sticky headers is now built into *<strong>all<\/strong> table-based Bootstrap templates by using the &#8216;Lock Table Header on Screen&#8217; app property in &#8216;Edit Properties&#8217;. <\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Implementation<\/h2>\n\n\n\n<p>Please insert the CSS code into the section of your application HTML. Note, this CSS rule can also be applied to your dictionary stylesheet.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style type=\"text\/css\">\r\n.tableFixHead {\r\n  overflow-y: auto;\r\n  height: 200px;\r\n}\r\n.tableFixHead table {\r\n  border-collapse: collapse;\r\n  width: 100%;\r\n}\r\n.tableFixHead th,\r\n.tableFixHead td {\r\n  padding: 8px 16px;\r\n}\r\n.tableFixHead th {\r\n  position: sticky;\r\n  top: 45px;\r\n  background: #fff;\r\n}\r\n&lt;\/style><\/code><\/pre>\n\n\n\n<p>To have a the data table use this sticky header, you will need to add the &#8216;tableFixHead&#8217; (without the quotes) to the list of classes on the <code>&lt;table><\/code> element. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/techblog\/images\/stickyheader1.jpg\" alt=\"Table HTML code\"\/><\/figure>\n\n\n\n<p>Save your m-Painter and re-run the application to see the sticky header.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Overview Often times in grid (table) based templates, developers want to ensure that the header row on a table &#8220;sticks&#8221; with the data as a user scrolls down the page. All Reports utilize this feature, available via the Application Property &#8216;Lock Table Header on Screen&#8217;. For non-Report Bootstrap applications, the&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[154],"ht-kb-tag":[],"class_list":["post-10643","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-bootstrap"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/10643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10643"}],"version-history":[{"count":20,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/10643\/revisions"}],"predecessor-version":[{"id":11932,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/10643\/revisions\/11932"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10643"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-category&post=10643"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-tag&post=10643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}