search

MurhafSousli / ngx-scrollbar

Custom overlay-scrollbars with native scrolling mechanism
https://ngx-scrollbar.netlify.app/
MIT License
618 stars 99 forks source link

Integration with Handsontable #570

Closed dfmmalaw closed 7 months ago

dfmmalaw commented 7 months ago

Is there any way to use ngx-scrollbar with handsontable?

I tried like this

<ng-scrollbar externalViewport=".ht_master" externalContentWrapper=".wtHolder" asyncDetection> <hot-table [hotId]="id" [settings]="hotSettings" licenseKey='non-commercial-and-evaluation'> </hot-table> </ng-scrollbar>

But it's not working and hot-table has 0 px height. Please suggest how I can replace the scrollbar inside hot-table with ngx-scrollbar.

Thank you!

MurhafSousli commented 7 months ago

I cannot access their stackblitz, can you make a stackblitz reproduction that I can have a look at?

Looking at their preview, it looks like the viewport is .wtHolder and the content wrapper is .wtHider, try the following

<ng-scrollbar externalViewport=".wtHolder" externalContentWrapper=".wtHider" asyncDetection>

  <hot-table [hotId]="id" [settings]="hotSettings" licenseKey='non-commercial-and-evaluation'></hot-table>

</ng-scrollbar>
dfmmalaw commented 7 months ago

@MurhafSousli I tried your code, but it didn't work. It didn't render the hot-table.

https://stackblitz.com/edit/handsontable-angular?file=app%2Fapp.component.ts

MurhafSousli commented 7 months ago

@dfmmalaw You sent a reproduction with Angular 5, I need a proper reproduction with Angular 17

MurhafSousli commented 7 months ago

I reproduce it for you, here is the same code I posted above in a working stackblitz https://stackblitz.com/edit/stackblitz-starters-ehhvhk

In my opinion, Handsontable is not well implemented. it seems to use old techniques. but maybe you can work on overriding the table CSS to enhance the appearance.