fix: fix grid width error when grid has scrollbar#3421
Conversation
WalkthroughThe update adjusts the calculation of the table body width within the Changes
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
packages/vue/src/grid/src/table/src/methods.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. ✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
WalkthroughThis pull request addresses a grid width error that occurs when a grid has a scrollbar. The change modifies the calculation of the grid's width to prevent the appearance of a scrollbar during browser zoom by adjusting the width calculation to account for fractional pixel values. Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| let overflowY = bodyEl.scrollHeight > bodyEl.clientHeight | ||
| // 解决缩放时会出现滚动条的问题 | ||
| let bodyW = Math.floor(bodyEl.getBoundingClientRect().width) | ||
| // 当浏览器缩放时，实际宽度会出现小数点，clientWidth会取整，此处减去1px解决缩放时会出现滚动条的问题 |
There was a problem hiding this comment.
The adjustment of bodyW to bodyEl.clientWidth - 1 is a critical fix to handle fractional pixel widths that can cause scrollbars to appear during browser zoom. This change ensures that the grid width calculation is more accurate and prevents unwanted scrollbars.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/vue/src/grid/src/table/src/methods.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
| // 当浏览器缩放时，实际宽度会出现小数点，clientWidth会取整，此处减去1px解决缩放时会出现滚动条的问题 | ||
| let bodyW = bodyEl.clientWidth - 1 |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Avoid subtracting a hardcoded pixel; use Math.floor on getBoundingClientRect().width
Subtracting 1 px unconditionally can undercut the true available width (even when there’s no fractional pixel) and skew the computed scrollbarWidth by +1, potentially misaligning sticky columns. Instead, floor the fractional width from the bounding rect to handle sub-pixel values without a hardcoded hack.
- // 当浏览器缩放时，实际宽度会出现小数点，clientWidth会取整，此处减去1px解决缩放时会出现滚动条的问题
- let bodyW = bodyEl.clientWidth - 1
+ // 使用 getBoundingClientRect 的宽度取整，避免浏览器缩放带来的分数像素导致滚动条
+ const bRectWidth = bodyEl.getBoundingClientRect().width
+ let bodyW = Math.floor(bRectWidth)📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // 当浏览器缩放时，实际宽度会出现小数点，clientWidth会取整，此处减去1px解决缩放时会出现滚动条的问题 | |
| let bodyW = bodyEl.clientWidth - 1 | |
| // 使用 getBoundingClientRect 的宽度取整，避免浏览器缩放带来的分数像素导致滚动条 | |
| const bRectWidth = bodyEl.getBoundingClientRect().width | |
| let bodyW = Math.floor(bRectWidth) |
2 participants
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit