SearchKit - Add sticky table header style

diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.component.js b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.component.js
index b31260e9f8abc6f568b87be7f711cc744e8c6c24..759b2afafb0494bbea710df79d346a2613f36817 100644 (file)
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.component.js
@@ -19,7 +19,8 @@
       this.tableClasses = [
         {name: 'table', label: ts('Row Borders')},
         {name: 'table-bordered', label: ts('Column Borders')},
-        {name: 'table-striped', label: ts('Even/Odd Stripes')}
+        {name: 'table-striped', label: ts('Even/Odd Stripes')},
+        {name: 'crm-sticky-header', label: ts('Sticky Header')}
       ];
 
       // Check if array contains item

diff --git a/ext/search_kit/css/crmSearchDisplayTable.css b/ext/search_kit/css/crmSearchDisplayTable.css
index 12ddb19010e46189fc874cc271a6d53d0e42dcbf..331e8bebb16d49b7e22952df70e48144e65531f8 100644 (file)
--- a/ext/search_kit/css/crmSearchDisplayTable.css
+++ b/ext/search_kit/css/crmSearchDisplayTable.css
@@ -12,3 +12,8 @@
 #bootstrap-theme .crm-search-display.crm-search-display-table tfoot > tr > td {
   font-weight: bold;
 }
+
+table.crm-sticky-header > thead > tr {
+  position: sticky !important;
+  top: var(--crm-menubar-bottom, 0px);
+}

diff --git a/js/crm.menubar.js b/js/crm.menubar.js
index 9cfa4caeac4c05f9316cc939113d0a4e3f258739..f6d1bb9cba1f252533aa9ae061287c33f0929b9e 100644 (file)
--- a/js/crm.menubar.js
+++ b/js/crm.menubar.js
@@ -101,11 +101,13 @@
       if (typeof speed === 'number') {
         $('#civicrm-menu').slideDown(speed, function() {
           $(this).css('display', '');
+          handleResize();
         });
       }
       $('body')
         .removeClass('crm-menubar-hidden')
         .addClass('crm-menubar-visible');
+      handleResize();
     },
     hide: function(speed, showMessage) {
       if (typeof speed === 'number') {
@@ -116,6 +118,7 @@
       $('body')
         .addClass('crm-menubar-hidden')
         .removeClass('crm-menubar-visible');
+      document.documentElement.style.setProperty('--crm-menubar-bottom', '0px');
       if (showMessage === true && $('#crm-notification-container').length && initialized) {
         var alert = CRM.alert('<a href="#" id="crm-restore-menu" >' + _.escape(ts('Restore CiviCRM Menu')) + '</a>', ts('Menu hidden'), 'none', {expires: 10000});
         $('#crm-restore-menu')
@@ -503,6 +506,7 @@
     } else {
       $('body').removeClass('crm-menubar-wrapped');
     }
+    document.documentElement.style.setProperty('--crm-menubar-bottom', ($('#civicrm-menu').height() + $('#civicrm-menu').position().top) + 'px');
   }
 
   // Figure out if we've hit the mobile breakpoint, based on the rule in crm-menubar.css