fix(Table): overflow container when toolbar or pages wrap (#4001)

* fix(Table): table overfolow when pages wrap * chore: bump version 8.8.2-beta03
dotnetcore · Aug 8, 2024 · acb412a · acb412a
1 parent 5ee4ad9
commit acb412a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.8.2-beta02</Version>
+    <Version>8.8.2-beta03</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.js b/src/BootstrapBlazor/Components/Table/Table.razor.js
@@ -42,10 +42,12 @@ export function reset(id) {
         return;
     }
 
-    table.columns = []
-    table.tables = []
-    table.dragColumns = []
-    table.thead = null
+    table.columns = [];
+    table.tables = [];
+    table.dragColumns = [];
+    table.thead = null;
+    table.toolbar = null;
+    table.pages = null;
 
     const shim = [...table.el.children].find(i => i.classList.contains('table-shim'))
     if (shim !== void 0) {
@@ -94,7 +96,10 @@ export function reset(id) {
             if (right) {
                 setToolbarDropdown(table, right)
             }
+            table.toolbar = toolbar;
         }
+
+        table.pages = [...table.el.children].find(i => i.classList.contains('nav-pages'));
     }
 
     setBodyHeight(table)
@@ -106,16 +111,22 @@ export function reset(id) {
             if (entry.target === shim) {
                 setTableDefaultWidth(table);
             }
-            else if (entry.target === table.search) {
+            else if (entry.target === table.search || entry.target === table.toolbar || entry.target === table.pages) {
                 setBodyHeight(table)
             }
-        })
+        });
     });
     if (table.thead) {
         observer.observe(shim);
     }
     if (table.search) {
-        observer.observe(table.search)
+        observer.observe(table.search);
+    }
+    if (table.toolbar) {
+        observer.observe(table.toolbar);
+    }
+    if (table.pages) {
+        observer.observe(table.pages);
     }
 }