Scroll bar in FireFox when using fixedColumnsLeft

[ghost]

Description

When using FixedColumnsLeft setting, scrollbar which overlaps the last row in FireFox hides behind the fixed column.

I have used below CSS to add padding-bottom so that scrollbar is visible. but It does not get selected in firefox if it is on FixedColumns side I guess thats because of z-index of fixedColumns...

@supports (-moz-appearance: none) {
       div.ht_master.handsontable.innerBorderLeft > div.wtHolder {
            padding-bottom: 15px !important;
      }
  }

Steps to reproduce

1. open link in firefox and scroll

Demo

Here is demo link Sandbox https://codesandbox.io/s/strange-kare-gpuubq?file=/src/App.tsx

Your environment

• React wrapper version: 11.1.0
• Handsontable version: 11.1.0

[adrianszymanski89]

Hi @jamshaid-tariq-geekybugs

I checked the issue on Firefox, and I can't get the result you are describing:

Do you use any system or browser scaling? Any additional plugins in Firefox? Also, please tell me what OS you use.

[ghost]

This is the Sandbox screenshot opened in firefox... you can see the scroll bar is overlapping last row of grid and also if you scroll all the way to left, It will hide under FixedColumns ie. first 6 columns of grid. I have Firefox 113.0.1 (64-bit) and Ubuntu 22.04.2 LTS. I think it should not be version dependent.

[adrianszymanski89]

@jamshaid-tariq-geekybugs

Thank you for the screenshot. I'll test on other systems and see if I'll be able to replicate the issue.

[ghost]

any updates?

[adrianszymanski89]

Hi @jamshaid-tariq-geekybugs

We tested it on other devices and still can't replicate the issue. Can you please tell me if you are using any scaling with Firefox?

[ghost]

I am not using any extension or plugin.

I have downloaded fresh firefox even in Windows system and it is still same result as shown in screenshot in first comment.

No issue on Mac (Firefox, safari) and chrome

[ghost]

@adrianszymanski89 any update?

[adrianszymanski89]

Hi @jamshaid-tariq-geekybugs

We can confirm that this issue is related strictly to Ubuntu + Firefox combination. I'll report it now internally for further investigation done by our developers.

[ghost]

are you able to produce the issue I have reported?

[adrianszymanski89]

Yes, we did reproduce it, but only with Firefox on Ubuntu. In all other configs, it worked fine.

[ghost]

Yes, we did reproduce it, but only with Firefox on Ubuntu. In all other configs, it worked fine.

I used this CSS to add padding at bottom so that scrollbar shows up.

@supports (-moz-appearance: none) {
     div.ht_master.handsontable.innerBorderLeft > div.wtHolder {
          padding-bottom: 15px !important;
     }
  }

but with this setting I am unable to grab scrollbar with mouse when it is on the side of fixed columns. in my case, if scroll bar is at left side (i.e below first 7 columns in my case..). I think because of z-index of ht_clone_left handsontable table.

[GabrielHangor]

I have a similar issue. Row which is fixed at the bottom is overflowing the vertical scrollbar when the table is filled with particular amount of rows.

[adrianszymanski89]

Hi @GabrielHangor

Thank you for the input. I'll make sure to update you when we find the source of the issue.

[vian94]

Hi @adrianszymanski89 i have the same issue. reproduce on win11 firefox. any update?

[adrianszymanski89]

Hi @vian94

Not yet. We checked if the most recent version of Handsontable has this problem, and it's still present. We will update this issue as soon as the bug is fixed.