Double scrollbars with Bulma

[liamc-sty]

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]

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]

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]

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]

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.