ant-design AntD Tabs Not Expanding After Window Resize

rjzwgtxy 于 4个月前发布在其他

关注(0)|答案(5)|浏览(109)

I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

*This ticket is to reopen #33333

Create an array of 10 Tabs
Open up the browser dev tools and set the code sandbox browser preview window to 680px width. All the Tabs should be fully visible without any overflowing. The ellipsis (...) menu should not appear at this width.
Resize the window width down slowly until the Tabs cannot fill the viewport (For example, at 670px width). The ellipsis (...) menu appears and shows the overflowed tabs when clicked on. This bevhaiour is as expected.
Resize the window width up slowly to 680px width. Observe that instead of fully showing all Tabs as in Step 2, the ellipsis (...) menu is still rendered. This behaviour is not expected.

What is expected?

The ellipsis (...) menu should be hidden when the window width is slowly resized up to to the original width where all Tabs fit in the window without overflowing.

What is actually happening?

The ellipsis (...) menu continues to display on the screen after resizing window width up to fit all Tabs (For example, at 680px width). The ellipsis (...) menu eventually hides from view at around 725px width, but we expect it to be hidden at 680px width.
| Environment | Info |
| ------------ | ------------ |
| antd | 4.17.3 |
| React | 16.13.1 |
| System | Ubuntu 20.04.2 LTS |
| Browser | 92.0.4515.131 (Official Build) (64-bit) |

Reproduction video available: https://www.dropbox.com/s/cmhic5xrl78eqns/antd-tabs-not-expanding-after-resizing-window-down-v2.mp4?dl=0

ant-design

来源：https://github.com/ant-design/ant-design/issues/33660

5条答案

按热度按时间

cunj1qz11#

Still cannot reproduce from your CodeSandBox... But the behavior of tab component in your video is wired.
Maybe this will occured in Ubuntu only?

赞(0）回复(0）举报 4个月前

goqiplq22#

Hello @charles-otto. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @charles-otto，我们完全同意你的提议/反馈，欢迎直接在此仓库创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。

赞(0）回复(0）举报 4个月前

ki1q1bka3#

Still cannot reproduce from your CodeSandBox... But the behavior of tab component in your video is wired. Maybe this will occured in Ubuntu only?

This problem also occurs in Windows 10 (tested in both Chrome and Firefox):

Please see latest video from Windows 10 reproduced in CodeSandBox:
https://www.dropbox.com/s/9acbjz0wsg8frho/antd-tabs-expanding-issue-win10-64bit-chrome.webm?dl=0

Note the following points in the video:

The window width originally was sized to 680px. All tabs are showing properly at this window width.
When we resize the window width to 670px, the "View More" ellipsis button appears. This is expected.
When we resize the window width from 670px back up to 680px, the last tab remains hidden. The "View More" ellipsis button continues to display. This is not expected.
If we continue to resize the window width to around 735px, all the tabs are showing again. However, all the tabs should be fully visible on the screen at 680px window width instead of 735px window width.

赞(0）回复(0）举报 4个月前

iqxoj9l94#

I also found this problem, I will try to fix it

赞(0）回复(0）举报 4个月前

vulvrdjw5#

Me also had same problem did you find any solution @charles-otto

赞(0）回复(0）举报 4个月前