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(Table): Hide header extra scrollbar control #16950

Merged
merged 4 commits into from Jun 4, 2019

Conversation

@afc163
Copy link
Member

@afc163 afc163 commented Jun 4, 2019

🤔 This is a ...

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

👻 What's the background?

close #4637
close #14211
close #10796

#4637 (comment) 里尝试过四种方法解决这个问题,然而当时都引起了其他问题,于是放弃了修复。

💡 Solution

2018 年有人回复方法四可以解决(实际上还是不行,会引发 #4936),继续这个方案,依据 https://stackoverflow.com/a/23200767 更换为 background-color: transparent,并根据 https://stackoverflow.com/a/54101063 解决了 Firefox 下的问题。

这个方案依旧会引起的 #4936 问题,原因是给滚动条设置背景色(或修改透明度)会影响滚动条宽度的计算,在 react-component/table#333 里进行了针对性处理。

📝 Changelog

Language Changelog
🇺🇸 English Fixed Table header extra vertical scrollbar problem.
🇨🇳 Chinese 修复 Table 头部多余的垂直滚动条样式。

☑️ Self Check before Merge

  • 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
@buildsize
Copy link

@buildsize buildsize bot commented Jun 4, 2019

File name Previous Size New Size Change
package-lock.json 823.28 KB 824.36 KB 1.08 KB (0%)

@afc163 afc163 force-pushed the fix-fixed-table-extra-scroll-bar branch from 3dc8655 to bb0314c Jun 4, 2019
@afc163 afc163 force-pushed the fix-fixed-table-extra-scroll-bar branch from bb0314c to f1c43c1 Jun 4, 2019
@codecov
Copy link

@codecov codecov bot commented Jun 4, 2019

Codecov Report

Merging #16950 into master will decrease coverage by 0.04%.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff             @@
##           master   #16950      +/-   ##
==========================================
- Coverage      96%   95.96%   -0.05%     
==========================================
  Files         263      263              
  Lines        7335     7335              
  Branches     2007     2046      +39     
==========================================
- Hits         7042     7039       -3     
- Misses        291      294       +3     
  Partials        2        2
Impacted Files Coverage Δ
components/_util/wave.tsx 85.84% <0%> (-2.84%) ⬇️

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 c2b1384...f1c43c1. Read the comment docs.

@afc163 afc163 merged commit d9a5ee0 into master Jun 4, 2019
27 checks passed
27 checks passed
@packtracker[bot]
packtracker/css 484 KB — ▲ 0.05%
Details
@packtracker[bot]
packtracker/javascript 3.74 MB — ▲ 0.01%
Details
CodeFactor No issues found.
Details
@dep[bot]
DEP All dependencies are resolved
@lgtm-com[bot]
LGTM analysis: JavaScript No new or fixed alerts
Details
License Compliance All checks passed.
Details
@semantic-pull-requests[bot]
Semantic Pull Request ready to be squashed
Details
@wip[bot]
WIP Ready for review
Details
ant-design.ant-design #ant design succeeded
Details
@buildsize[bot]
buildsize Significant change of package-lock.json up by 1.08 KB (0.13%)
Details
ci/circleci: compile Your tests passed on CircleCI!
Details
ci/circleci: dist Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: setup Your tests passed on CircleCI!
Details
ci/circleci: test_dist Your tests passed on CircleCI!
Details
ci/circleci: test_dist_15 Your tests passed on CircleCI!
Details
ci/circleci: test_dom Your tests passed on CircleCI!
Details
ci/circleci: test_dom_15 Your tests passed on CircleCI!
Details
ci/circleci: test_es Your tests passed on CircleCI!
Details
ci/circleci: test_es_15 Your tests passed on CircleCI!
Details
ci/circleci: test_lib Your tests passed on CircleCI!
Details
ci/circleci: test_lib_15 Your tests passed on CircleCI!
Details
ci/circleci: test_node Your tests passed on CircleCI!
Details
ci/circleci: test_node_15 Your tests passed on CircleCI!
Details
@codecov[bot]
codecov/patch Coverage not affected when comparing c2b1384...f1c43c1
Details
@codecov[bot]
codecov/project 95.96% (-0.05%) compared to c2b1384
Details
security/snyk - package.json (paranoidjk) No new issues
Details
@delete-merged-branch delete-merged-branch bot deleted the fix-fixed-table-extra-scroll-bar branch Jun 4, 2019
@ikobe-zz ikobe-zz mentioned this pull request Jun 6, 2019
10 tasks
@yoyo837
Copy link
Contributor

@yoyo837 yoyo837 commented Jun 11, 2019

image

Mac 上固定内容高滚动,header好像还有点问题

@afc163
Copy link
Member Author

@afc163 afc163 commented Jun 11, 2019

@yoyo837 有重现么

@yoyo837
Copy link
Contributor

@yoyo837 yoyo837 commented Jun 11, 2019

@afc163 我上codesandbox开一个试试...

@yoyo837
Copy link
Contributor

@yoyo837 yoyo837 commented Jun 11, 2019

@yoyo837
Copy link
Contributor

@yoyo837 yoyo837 commented Jun 11, 2019

如果全部加上width,则错位

@crazyair
Copy link
Member

@crazyair crazyair commented Jun 18, 2019

为什么我这里 ie 的列头还有滚动条,最新版的 antd
image

@afc163
Copy link
Member Author

@afc163 afc163 commented Jun 18, 2019

@qq645381995 给在线演示

@crazyair
Copy link
Member

@crazyair crazyair commented Jun 18, 2019

@afc163 做了半天排除法,确定了是重置样式 @line-height-base : 1.6; 改成了 1.6 的原因,这个是因为什么问题呢?
table 要没有数据才能出现滚动条

image
就是改成 1.6 就出现滚动条

@crazyair
Copy link
Member

@crazyair crazyair commented Jun 19, 2019

@afc163 #17175 提了个 issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants