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.

Sign up for GitHub

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

Jump to bottom

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 •
edited by zombieJ
Loading

[中文版模板 / 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 June 15, 2020 05:20
@ant-design-bot
Copy link
Contributor

ant-design-bot commented Jun 15, 2020 •
edited
Loading

@ant-design-bot
Copy link
Contributor

ant-design-bot commented Jun 15, 2020 •
edited
Loading

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jun 15, 2020 •
edited
Loading

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 •
edited
Loading

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.

zombieJ
zombieJ reviewed Jun 15, 2020
View reviewed changes
components/list/style/index.less Outdated

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

Choose a reason for hiding this comment

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

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

Copy link
Contributor Author

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

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 •
edited
Loading

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

Choose a reason for hiding this comment

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

厉害，这个方法好

Copy link
Contributor Author

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

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
@zombieJ zombieJ deleted the fix-list-max-width branch June 16, 2020 03:18
@afc163 afc163 mentioned this pull request Jun 21, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@zombieJ zombieJ zombieJ left review comments

@afc163 afc163 Awaiting requested review from afc163

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Paragraph ellipsis props doesn't properly truncate the text
3 participants
@07akioni @ant-design-bot @zombieJ