(修正)Table组件高度溢出Issues #7901

[Tony-ST0754]

(修正)Table组件高度溢出Issues #7901

Link issues

fixes #7901

问题描述 / Problem Description

当Table组件启用IsFixedHeader属性值为true，且Height指定了固定值时，由于组件可能在使用过程中将搜索面板置于Table组件顶部，且搜索面板的高度值是会随着开发人员给定的搜索条件的数量来变化，因此，导致需要重算Table组件的主体部分的高度，因此，在页面渲染时出现的高度“抖动”或“由高变低”的现象。

解决方案 / Solution

经仔细观察Table组件渲染生成时.table-container下主要分为四大块：
1、 .table-search当组件将SearchMode属性设为SearchMode.Top时生成
2、 .table-toolbar当组件将ShowToolbar属性设为true时生成
3、 .table-shim组件的主体部分，当IsFixedHeader为true时，则有.table-fixed
4、.nav-pages组件的分页控制部分
采用flex响应式布局处理，方案如下：

.table-container { 
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.table-search {
   flex-shrink: 0;
   box-sizing: border-box;
}
.table-toolbar{
   flex-shrink: 0;
   box-sizing: border-box;
}
.table-fixed {
   flex-shrink: 1;
   box-sizing: border-box;
}
.nav-pages{
   flex-shrink: 0;
   box-sizing: border-box;
}

思考：Table.razor.js中计算高度的过程是否还有必要保留？！
疑虑：目前我不确定是否还存在其他方面的功能需要用到这个计算

Risk

• High
• Medium
• Low

Verification

• Manual (required)
• Automated

Packaging changes reviewed?

• Yes
• No
• N/A

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• Merge the latest code from the main branch

[bb-auto]

Thanks for your PR, @Tony-ST0754. Someone from the team will get assigned to your PR shortly and we'll get it reviewed.

[sourcery-ai]

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Adjusts the Table component container and sub-sections to use a flex column layout with controlled flex-shrink behavior and box-sizing so that the fixed-header table body resizes correctly without height jitter when search and toolbar areas change height.

Flow diagram for Table container flex layout structure

flowchart TD
  table_container[".table-container (display:flex, flex-direction:column, box-sizing:border-box, height:100%)"]
  table_search[".table-search (flex-shrink:0, box-sizing:border-box)"]
  table_toolbar[".table-toolbar (flex-shrink:0, box-sizing:border-box)"]
  table_fixed[".table-fixed/.table-shim (flex-shrink:1, box-sizing:border-box, height:100%, overflow:hidden)"]
  nav_pages[".nav-pages (flex-shrink:0, box-sizing:border-box, margin-block-start:.5rem)"]

  table_container --> table_search
  table_container --> table_toolbar
  table_container --> table_fixed
  table_container --> nav_pages

Loading

File-Level Changes

Change	Details	Files
Convert the table container to a flex column layout and make pagination a non-shrinking footer section.	Add display:flex, flex-direction:column, and box-sizing:border-box to the table container root so it can manage vertical layout of child sections. Set .nav-pages to flex-shrink:0 and box-sizing:border-box so pagination keeps a stable height at the bottom of the container.	src/BootstrapBlazor/Components/Table/Table.razor.scss
Ensure toolbar and search sections do not shrink and use border-box sizing.	Add a new .table-toolbar rule to set flex-shrink:0 and box-sizing:border-box so the toolbar height is preserved. Update .table-search to set flex-shrink:0 and box-sizing:border-box so its dynamic height is respected without affecting layout unexpectedly.	src/BootstrapBlazor/Components/Table/Table.razor.scss
Allow the fixed table body area to flexibly occupy remaining height while preventing layout overflow.	Update .table-fixed to set flex-shrink:1 and box-sizing:border-box so it acts as the flexible main content area within the flex column and respects the container height constraints.	src/BootstrapBlazor/Components/Table/Table.razor.scss

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#7901	Ensure the Table component maintains the configured height (no overflow/jitter) when Height is set and IsFixedHeader is true, including when the search panel and toolbar heights change.	✅

Possibly linked issues

• bug(Table):Table组件高度溢出 #7901: PR adjusts Table flex layout (.table-container, .table-search, .table-toolbar, .table-fixed, .nav-pages) to fix overflow issue.
• bug(Table):Table组件高度溢出 #7901: PR implements flex-based layout in Table container to fix the height overflow reported in issue bug(Table):Table组件高度溢出 #7901.
• bug(Table):Table组件高度溢出 #7901: PR changes Table flex layout (.table-container, .table-fixed, search/toolbar) to fix height miscalculation reported in issue.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• For the main table body (.table-fixed), relying on height: 100% inside a flex container can be fragile; consider using flex: 1 1 auto (and possibly dropping height: 100%) so it naturally takes the remaining space and behaves more predictably in nested layouts.
• You’re adding box-sizing: border-box to multiple elements that likely already inherit it from a global rule; if that’s the case in this project, you can simplify by only setting it where behavior truly differs to avoid redundant declarations.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- For the main table body (`.table-fixed`), relying on `height: 100%` inside a flex container can be fragile; consider using `flex: 1 1 auto` (and possibly dropping `height: 100%`) so it naturally takes the remaining space and behaves more predictably in nested layouts.
- You’re adding `box-sizing: border-box` to multiple elements that likely already inherit it from a global rule; if that’s the case in this project, you can simplify by only setting it where behavior truly differs to avoid redundant declarations.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}