search

pupudu / window-table

Windowing Table for React based on React Window
https://window-table.netlify.com/
170 stars 13 forks source link

Double scrollbars with Bulma #59

Open liamc-sty opened 4 years ago

liamc-sty commented 4 years ago

Thank you for this awesome library, it saves a lot in performance for my app.

I have an issue when using the Html5Table component with Bulma however, and I cannot pinpoint the issue. The outer div which contains the table header and auto-sizing table appears to have an incorrect height, which has the side effect of showing a Y scrollbar (shown in Ubuntu 20.04 + Firefox 79).

In my app it appears to be the extra height of the table header row, but in this reproduced example it does not look like that is the case. When removing the Bulma styles, it works as it should.

Is there something in Bulma's CSS that is knocking the auto-sizer off course? I have tried eliminating the rules one-by-one to get the culprit to no joy.

Thank you.

pupudu commented 4 years ago

Hey @liamc-sty There seems to be an issue with the auto-sizer not detecting the 1px border added by bulma. I can look into it over the weekend.

However, a quick workaround for your problem would be to add a little bit of css override to the table cell. Here's an example: https://codesandbox.io/s/quizzical-napier-h5p23?file=/src/App.js

liamc-sty commented 4 years ago

Hey @liamc-sty There seems to be an issue with the auto-sizer not detecting the 1px border added by bulma. I can look into it over the weekend.

However, a quick workaround for your problem would be to add a little bit of css override to the table cell. Here's an example: https://codesandbox.io/s/quizzical-napier-h5p23?file=/src/App.js

This is great, that fixes that issue, but then when I add a rowHeight prop, the issue comes back: https://codesandbox.io/s/busy-cray-y99zu

As you can see the div containing the table of data has an incorrectly calculated height, only 2 pixels subtracted from the height of the "window", i.e. 248px. Strange?

liamc-sty commented 4 years ago

Hey @liamc-sty There seems to be an issue with the auto-sizer not detecting the 1px border added by bulma. I can look into it over the weekend. However, a quick workaround for your problem would be to add a little bit of css override to the table cell. Here's an example: https://codesandbox.io/s/quizzical-napier-h5p23?file=/src/App.js

This is great, that fixes that issue, but then when I add a rowHeight prop, the issue comes back: https://codesandbox.io/s/busy-cray-y99zu

As you can see the div containing the table of data has an incorrectly calculated height, only 2 pixels subtracted from the height of the "window", i.e. 248px. Strange?

Actually, this issue might not be strictly related to Bulma, apologies. It still creates an extra scrollbar if Bulma is not present.

pupudu commented 4 years ago

Hey @liamc-sty Thanks a lot for the feedback. Let me have a deeper look in that case. I will get back as soon as possible.