keep height of all panes consistent

google · Nov 17, 2023 · 48f9160 · 48f9160
1 parent f84d00f
commit 48f9160
Showing 1 changed file with 23 additions and 0 deletions.
diff --git a/static/js/tabpane-persist.js b/static/js/tabpane-persist.js
@@ -15,6 +15,26 @@ const _tdStoragePersistKey = (tabKey) =>
 
 const _tdSupportsLocalStorage = () => typeof Storage !== 'undefined';
 
+function adjustTabContentHeights() {
+  const tabPanes = document.querySelectorAll('.tab-content');
+
+  tabPanes.forEach(pane => {
+    let maxHeight = 0;
+    const tabBody = pane.querySelectorAll('.tab-body');
+
+    tabBody.forEach(tabContent => {
+      tabContent.style.display = 'block'; // Temporarily show the tab content
+      maxHeight = Math.max(maxHeight, tabContent.clientHeight);
+      tabContent.style.display = ''; // Reset the display property
+    });
+
+    tabBody.forEach(tabContent => {
+      tabContent.style.height = maxHeight + 'px';
+    });
+  });
+}
+
+
 // Helpers
 
 function tdPersistKey(key, value) {
@@ -93,6 +113,9 @@ function tdGetAndActivatePersistedTabs(tabs) {
     tdActivateTabsWithKey(key);
   });
 
+  // Adjust tab content heights
+  adjustTabContentHeights();
+
   return key_ageList;
 }