Table headers block scrollbar when the scroll container has padding
Closed this issue · 7 comments
When the scroll container has left and/or right padding the width of the floatThead-container is not calculated correctly and the table headers are positioned over the scrollbar which makes the top of the scrollbar not usable.
Steps to reproduce:
- Add a div with left and right padding around the table and add the floatthead plugin on the table with the div as the scrollContainer.
- Now try to use the top of the scrollbar by clicking on the top button of the scrollbar or dragging the scrollbar down from the top.
Yeah that looks like a bug, here is a workaround:
https://jsfiddle.net/0fo643ry/1/
Let me know if that works for you.
Yes, the workaround works, but also the scrollbar falls into the padding, so quite difficult to get styling correct this way.
Can you explain what you mean by that..
Ok, maybe I see what you mean. How about this:
https://jsfiddle.net/7hgmxp9j/1/
Yes, that is better. What I meant was that the scrollbar in my example was on the right side of the wrapper div and extended to the top and bottom of the wrapper and the table was padded into the wrapper.
What are the chances this would come up the exact day I have the same issue. Thank you both for this discussion. I was able to resolve my issues following along here.
I looked at all these fiddles and comments and I cannot see what the original issue was that were were talking about. Its possible that something was fixed in a browser, or maybe this was a windows scrollbar issue, and i am on a mac now.
If someone knows what this is all about, feel free to reopen