Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: List.Item.Meta width overflow #24992

Merged
merged 2 commits into from Jun 16, 2020
Merged

fix: List.Item.Meta width overflow #24992

merged 2 commits into from Jun 16, 2020

Conversation

07akioni
Copy link
Contributor

@07akioni 07akioni commented Jun 15, 2020

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Perfermance optimization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

fix #24969

💡 Background and solution

Set max-width on wrapper & overflow hidden on flex-item

📝 Changelog

Language Changelog
🇺🇸 English Fix List.Item.Meta content width may overflow sometimes.
🇨🇳 Chinese 修正了 List.Item.Meta 内容宽度有时会溢出的问题。

☑️ 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
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

@07akioni 07akioni requested a review from afc163 Jun 15, 2020
@ant-design-bot
Copy link
Contributor

ant-design-bot commented Jun 15, 2020

@ant-design-bot
Copy link
Contributor

ant-design-bot commented Jun 15, 2020

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jun 15, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 82a6204:

Sandbox Source
antd reproduction template Configuration
antd reproduction paragraph elipsis bug Issue #24969
antd reproduction paragraph elipsis bug Issue #24969

@codecov
Copy link

codecov bot commented Jun 15, 2020

Codecov Report

Merging #24992 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##           master   #24992   +/-   ##
=======================================
  Coverage   99.37%   99.37%           
=======================================
  Files         365      365           
  Lines        7303     7303           
  Branches     2042     2041    -1     
=======================================
  Hits         7257     7257           
  Misses         46       46           

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a91bd69...82a6204. Read the comment docs.


&-avatar {
margin-right: @list-item-meta-avatar-margin-right;
}
&-content {
flex: 1 0;
overflow: hidden;
Copy link
Member

@zombieJ zombieJ Jun 15, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里也用 max-widthoverflow: hidden 会 break 掉用户自定义出框的样式

Copy link
Contributor Author

@07akioni 07akioni Jun 15, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里用 max-width 会和有 avatar 的情况冲突,视觉宽度变成 avatar + 100%,还是会溢出

Copy link
Contributor Author

@07akioni 07akioni Jun 15, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

看取舍吧,我感觉行为上难两全。

Copy link
Member

@zombieJ zombieJ Jun 15, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

试试:

--- overflow: hidden;
+++ width: 0;

Copy link
Contributor Author

@07akioni 07akioni Jun 16, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

厉害,这个方法好

Copy link
Contributor Author

@07akioni 07akioni Jun 16, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

如果用户强行塞一个很 width 写死很宽的东西那也没办法,flex-item 如果不设定 overflow: hidden 还是一定会被撑开。但是那种情况比较特殊,我觉得这样差不多够用,因为 list-item 一般放的还是文字,文字是可以 flex 到比较窄的,可以覆盖大多数情况

Copy link
Contributor Author

@07akioni 07akioni Jun 16, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

那那种情况就让他们自己调吧

@zombieJ zombieJ merged commit 298d903 into master Jun 16, 2020
19 checks passed
@zombieJ zombieJ deleted the fix-list-max-width branch Jun 16, 2020
@afc163 afc163 mentioned this pull request Jun 21, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Paragraph ellipsis props doesn't properly truncate the text
3 participants