How to overwrite the Css

Tags: #<Tag:0x00007efc650a3670>

In default. ht_clone_bottom.wtHolder, . ht_clone_top . wtHolder {
Overflow-x : auto;
Overflow-y : hidden;
}

I need to overwrite the overflow-x to hidden

But not overwriting because of it I am facing issue on selecting the first row cell by muse click. Can you please give me a suggestion to resolve?

Hi @tamileniyan66

Generally, we don’t recommend overwriting core Handsontable styling as it might result in functioning and displaying errors. What is your expected result here?

Yes in my case i am having both colHeaders and RowHeaders. I am having more than 15 columns. In that time horizontal scrollbar enabled.
Such case selecting the cell using mouse click not working for the 1st row only. For other rows cell selection is working properly.
After debugging such scenario, The all column fits in the page without horizontal scrollbar means 1st row cell selection working Else i am facing issue on cell selection in 1st row cells.

Ok, so, basing on the example I prepared I understand that when the table is longer than the viewport and the scrollbar appear, then you’re not able to select any cell in first row, right?

https://jsfiddle.net/aszymanski/rj53hpzs/1/

I don’t see such a behavior here, so maybe you can change this example so the issue is replicable. Also, can you tell me which OS, browser and Handsontable version you use?

Yes, I am using
Handsontable: “ng2-handsontable”: “^2.1.0-rc.3”,
Os: windows 10
browser:chrome

Hi there

I was searching a solution for the exact same problem and I confirm that reducing the number of columns to make them fit within the width of the table the problem does not occur (number of rows doesn’t matter).

I’m working on a legacy site, which uses h.o.t. version 0.9.0 and same OS and browser as tamileniyan

Update: apparently the first row is not selectable because there is a hidden horizontal scroll bar over it
(if i click&hold on the first columns than drag to the right, the table scrolls with it)
Can you confirm the same behavior?

@tamileniyan66 @marcari

Thank you. I think you can try this solution. It hides the scrollbars but keeps the scrolling ability:

https://jsfiddle.net/aszymanski/e3ohm912/3/

Let me know if that helps with your issue.

The suggested solution actually works (at least in my case), but it’s not viable because in some cases I have around 50cols/200rows and can’t force the user to scroll with the arrow keys (it’s not even intuitive)

Any other idea?

On macOS (where I’m testing it) the scrollbar will be visible only during the scrolling - you can change that in system settings. Then the problem isn’t so apparent. I know that it’s also possible on Windows, but of course, it’s not possible to know what your users system settings are.

Those two solutions seems to be the only ones reasonable at the moment.

I am using ng2-handsontable package in angular. This fix is not working for me

Hi @tamileniyan66

ng2-handsontable is very old version of our wrapper for Angular and it’s no longer supported by us. I highly recommend to upgrade to the newest version, not only because of the functionalities upgrades but because of many security updates.

Ohhh okay if I updated to handsontable.
Can you tell me how many days it’s valid for license key with commercial and evaluation purpose.

@tamileniyan66

If you want to buy a new license you should contact our Sales Team, they will explain you everything in detail.

https://handsontable.com/contact