Datatable horizontal scroll not working in firefox

Webix JS
1

Hi,

I have a strange issue on FireFox with a datatable in a popup window.
The horizontal scrollbar shows (thin) and does not change to it’s thick varant on hover-ing the scrollbar, and does not respond to any mouse events.

The vertical scrollbar shows and when hover-ing becomes thick and responds to mouse events.

In Chromium and Opera, the scrollbars are not dynamic (aka aways shown thick) and DO work.

Is this a known problem ?, Is there a workaround?
Shall I open a ticket?

OS: Linux
FireFox version : 151.0.2
Webix version: 11.3.3

Later:
I tracked this down to this line in source/views/vscroll.js
Apparently, something went wrong when calculating the contentFits varable.
To me, this looks like a bug. I can, however work aroud this, by adding an onBeforeShow handler for the popup window which overrides the pointerEvents to “auto” like this:

on: {
    onBeforeShow: () => {
    const hs = $$(winId).getNode().querySelector("div.webix_ss_hscroll");
    if (hs) {
        hs.style.pointerEvents = "auto";
    }
},

Thanks
-Fritz

2

Hello @felfert ,

Thank you for a report. I have passed the issue to our developers so we will fix it in one of the upcoming releases. We will notify you here when it is released.

At the moment, we can confirm that there is a regression seen in a FF browser. We managed to reproduce a similar behaviour in a Windows OS as well (both with horizontal and vertical scrollsbars).
The dev.team will investigate the problem thoroughly and provide a fix that shoud cover your case with a table inside a window too.

3

In the meantime, I was able to get it working without my previous “hack” by doing the following:

  1. In the columns properties, set the adjust property to “data” like this for each column:
columns: [
    { id: "title", adjust: "data", },
    { id: "value", adjust: "data", fillspace: true },
],
  1. After programmatically populating the table with data, invoke adjustColumn for all columns like this:
$${"tableId"}.adjustColumn("title", "data");
$${"tableId"}.adjustColumn("value", "data");

At the time of reporting this, I had only (2) implemented.

Regards,

  • Fritz