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

Horizontal scroll shadow in Table not showing on header without fixed right column #28096

Open
1 task
EvertEt opened this issue Nov 30, 2020 · 14 comments
Open
1 task

Comments

@EvertEt
Copy link

@EvertEt EvertEt commented Nov 30, 2020

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

Reproduction link

Edit on CodeSandbox

Steps to reproduce

What is expected?

  • Shadow should continue over header

What is actually happening?

The header is on top of the shadow making it not show

Environment Info
antd 4.8.6
React 16.13.1
System Mac 10.15
Browser Chrome 86.0.4240.198
@ant-design-bot
Copy link
Contributor

@ant-design-bot ant-design-bot commented Dec 3, 2020

Hello @EvertEt. 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!

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

giphy

@marianayap
Copy link

@marianayap marianayap commented Dec 4, 2020

@EvertEt I wasn't able to see the issue, could you add more details please?

@EvertEt
Copy link
Author

@EvertEt EvertEt commented Dec 4, 2020

For sure @marianayap !

The issue is visible here: (the sandbox above)
image

Adding fixed: "right" to the last column:
image

@marianayap
Copy link

@marianayap marianayap commented Dec 4, 2020

@EvertEt I can see the issue when I add fixed: "right" but I still don't have very clear what should happen

@EvertEt
Copy link
Author

@EvertEt EvertEt commented Dec 4, 2020

image
should become
image

@UxieVerity
Copy link

@UxieVerity UxieVerity commented Dec 10, 2020

@EvertEt I can see the issue when I add fixed: "right" but I still don't have very clear what should happen

he just want the effect of the overflow table-right show like the fixed:right at the column header.i guess

@sweetliquid
Copy link

@sweetliquid sweetliquid commented Dec 14, 2020

Can I take it?

@sweetliquid
Copy link

@sweetliquid sweetliquid commented Dec 14, 2020

It looks like that the z-index of .ant-table-container::after is too small.

@yoyo837
Copy link
Contributor

@yoyo837 yoyo837 commented Dec 14, 2020

PR welcome!

@marianayap
Copy link

@marianayap marianayap commented Dec 16, 2020

@EvertEt Hello! it seems that if you add this line of code
{ title: 'Action', key: 'operation', fixed: 'right', width: 100, render: () => <a>action</a>, },

after { title: "Column 8", dataIndex: "address", key: "8" } in line 64 it works

https://codesandbox.io/s/fixed-header-and-scroll-bar-with-the-page-antd486-forked-nlwjl?file=/index.js

@EvertEt
Copy link
Author

@EvertEt EvertEt commented Dec 16, 2020

Yes, that's indeed what is explained in the first message. The bug is visible when there is no fixed: right column

@DaoxingHuang
Copy link
Contributor

@DaoxingHuang DaoxingHuang commented Dec 20, 2020

@EvertEt @marianayap The issue caused the ''sticky" property for Table. if you use it , the class 'ant-table-sticky-header' is added table header. The css as below:
.ant-table-sticky-header { position: -webkit-sticky; position: sticky; z-index: calc(2 + 1); }
why is 2+1? 'cause the siblings ant-table-body is 2.
@EvertEt the shadow you mentioned ,the css like this:
.ant-table-ping-right:not(.ant-table-has-fix-right) .ant-table-container::after { -webkit-box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15); box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15); }
if use default z-index ,the value is 1, so if you want to fix this ,try set z-index is bigger than 3 ,for example 4.
.ant-table-ping-right:not(.ant-table-has-fix-right) .ant-table-container::after { -webkit-box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15); box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15); z-index: 4; }

@OmriGM
Copy link
Contributor

@OmriGM OmriGM commented Dec 20, 2020

I think this bug can be fixed in react-components/table: https://github.com/react-component/table/tree/master/src

@DaoxingHuang
Copy link
Contributor

@DaoxingHuang DaoxingHuang commented Dec 20, 2020

I will research more ,and PR will be pulled in next days.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
9 participants