fix(SelectTable): dropdown pop not full width (#3465)

* fix: 修复 table 在弹窗中宽度无法计算问题 * fix: 修复 SelectTable 宽度多两个像素问题 * chore: bump version 8.5.6-beta01
dotnetcore · May 10, 2024 · aade44d · aade44d
1 parent 0869d3e
commit aade44d
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 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.5.5</Version>
+ <Version>8.5.6-beta01</Version>
  </PropertyGroup>
 
  <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

diff --git a/src/BootstrapBlazor/Components/Select/SelectTable.razor.js b/src/BootstrapBlazor/Components/Select/SelectTable.razor.js
@@ -16,7 +16,7 @@ export function init(id) {
  }
  const dropdown = el.querySelector('.dropdown-table') || document.querySelector('.popover-dropdown .dropdown-table');
  if (dropdown) {
- dropdown.style.setProperty('--bb-dropdown-table-width', `${width}px`);
+ dropdown.style.setProperty('--bb-dropdown-table-width', `${width - 2}px`);
  }
  }
 

diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.js b/src/BootstrapBlazor/Components/Table/Table.razor.js
@@ -9,7 +9,7 @@ const setBodyHeight = table => {
  const el = table.el
  const children = [...el.children]
  const search = children.find(i => i.classList.contains('table-search'))
- table.search = search
+ table.search = search;
 
  if (isVisible(el) === false) {
  return;
@@ -573,9 +573,11 @@ const setTableDefaultWidth = table => {
  const { scrollWidth, columnMinWidth } = table.options;
  const length = table.tables[0].querySelectorAll('th').length;
  const tableWidth = length * columnMinWidth;
- if (tableWidth > table.tables[0].offsetWidth) {
- table.tables[0].style.setProperty('width', `${tableWidth}px`);
- table.tables[1].style.setProperty('width', `${tableWidth - scrollWidth}px`);
+ if (table.tables[0].checkVisibility()) {
+ if (tableWidth > table.tables[0].offsetWidth) {
+ table.tables[0].style.setProperty('width', `${tableWidth}px`);
+ table.tables[1].style.setProperty('width', `${tableWidth - scrollWidth}px`);
+ }
  }
  }
 }