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

3.3.3 版本 Table的每一列不指定宽度时,并且设置每一列的内容文字不换行,自动拉伸得到的宽度计算错误 #9822

Closed
sam019 opened this Issue Mar 27, 2018 · 6 comments

Comments

Projects
None yet
4 participants
@sam019

sam019 commented Mar 27, 2018

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

Version

3.3.3

Environment

macOS 10.13.3 chrome 65 react 3.3.3

Reproduction link

Edit on CodeSandbox

Steps to reproduce

在重现链接的页面中,将右侧窗口宽度调小,不会出现滚动条,文字有重叠现象。将宽度调大时,各行的宽度填充未按照原有比例填充,导致内容多的列看起来很拥挤,内容少的列看起来很「空旷」

What is expected?

窗口宽度较小时,小于自然展示所需最小宽度时,能自动出现滚动条。宽度较大时,能按照内容原始宽度的比例扩充。

What is actually happening?

宽度小时,未出现滚动条。较大时,填充的比例不对

@ant-design-bot

This comment has been minimized.

ant-design-bot commented Mar 27, 2018

Translation of this issue:


3.3.3 When the width of each column of Table is not specified, and the content of each column is not wrap, the width calculated by automatic stretching is incorrect.

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

Version

3.3.3

Environment

macOS 10.13.3 chrome 65 react 3.3.3

Reproduction link

Edit on CodeSandbox

Steps to reproduce

In the page that reproduces the link, the width of the right window is reduced, scroll bars do not appear, and text overlaps. When the width is increased, the width padding of each line is not filled according to the original proportion. As a result, the columns with a large content may look crowded, and the columns with a small content may look “empty”.

What is expected?

When the window width is smaller, the scroll bar will automatically appear when it is smaller than the minimum width required for natural display. When the width is large, it can be expanded in proportion to the original width of the content.

What is actually happening?

When the width is small, no scroll bar appears. When larger, the proportion of filling is not correct

@yesmeck

This comment has been minimized.

Member

yesmeck commented Mar 27, 2018

没重现你说的问题,能给个截图吗?

@sam019

This comment has been minimized.

sam019 commented Mar 27, 2018

case

@yesmeck 像图中这样,ABC列的宽度应该依次递减,在拉伸后,ABC一样宽了,A和B没有得到更大的宽度。而且没有自动出现横向滚动条,导致A和B的宽度过小,内容重叠了

@yesmeck

This comment has been minimized.

Member

yesmeck commented Mar 27, 2018

#9704 引起的,已经 revert 掉,会在下个版本修复。

@yesmeck yesmeck closed this Mar 27, 2018

@fayhy

This comment has been minimized.

fayhy commented May 8, 2018

@yesmeck 目前最新的 3.5.0 还没有 revert 掉,c7e4167 貌似丢了

@yesmeck

This comment has been minimized.

Member

yesmeck commented May 8, 2018

奇怪,先自己覆盖下样式吧。

bors bot added a commit to mozilla/delivery-console that referenced this issue May 10, 2018

Merge #158
158: Update dependency antd to v3.5.1 r=rehandalal a=renovate[bot]

This Pull Request updates dependency [antd](https://github.com/ant-design/ant-design) from `v3.5.0` to `v3.5.1`



<details>
<summary>Release Notes</summary>

### [`v3.5.1`](https://github.com/ant-design/ant-design/releases/3.5.1)
[Compare Source](ant-design/ant-design@3.5.0...3.5.1)
- 🐞 Fixed broken style of Input.Group under Form. [#&#8203;10371](`ant-design/ant-design#10371)
- 🐞 Fixed overlay style of Select. [#&#8203;10383](`ant-design/ant-design#10383)
- 🐞 Remove focused style of Collapse.
- 🐞 Remove unnecessary `z-index` of Input.Group and Checkbox. [#&#8203;9840](`ant-design/ant-design#9840) [#&#8203;10385](`ant-design/ant-design#10385)
- 🐞 Fixed that monospaced font family can't be bold.
- Table
  - 💄 Rewrited the editable table demo. [#&#8203;10119](`ant-design/ant-design#10119)
  - 🐞 Fixed that table column overlay each other. [#&#8203;9822](`ant-design/ant-design#9822)
- TypeScript
  - 🐞 Fixed Breadcrumb.Item type. [#&#8203;10372](`ant-design/ant-design#10372) [@&#8203;karol-majewski]
  - 🐞 Fixed Table `rowSelection` type。[#&#8203;10374](`ant-design/ant-design#10374)


---


- 🐞 修复 Input.Group 在 Form 下样式错位的问题。[#&#8203;10371](`ant-design/ant-design#10371)
- 🐞 修复 Select 箭头和内容重叠的问题。[#&#8203;10383](`ant-design/ant-design#10383)
- 🐞 移除 Collapse 点击时的 focus 样式。
- 🐞 移除 Input.Group 和 Checkbox 不必要的 `z-index`。[#&#8203;9840](`ant-design/ant-design#9840) [#&#8203;10385](`ant-design/ant-design#10385)
- 🐞 修复一个数字等宽字体没有加粗的问题。
- Table
  - 💄 重写了可编辑表格的演示。[#&#8203;10119](`ant-design/ant-design#10119)
  - 🐞 修复一个表格列内容互相重叠的问题。[#&#8203;9822](`ant-design/ant-design#9822)
- TypeScript
  - 🐞 调整 Breadcrumb.Item 的类型。[#&#8203;10372](`ant-design/ant-design#10372) [@&#8203;karol-majewski]
  - 🐞 修复 Table 的 `rowSelection` 的类型。[#&#8203;10374](`ant-design/ant-design#10374)

---

</details>




---

This PR has been generated by [Renovate Bot](https://renovatebot.com).

Co-authored-by: Renovate Bot <bot@renovateapp.com>

yesmeck referenced this issue Jun 27, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment