horizontal scroll bars missing from datatable

Webix JS
1

Hi, I’ve noticed that occasionally the horizontal scroll bars don’t show up in a datatable, especially if the columns are fixed.

So the only way to scroll the table horizontally it to use my trackpad - which makes it difficult to scroll horizontally and not vertically at the same time.

Is this a bug, or is there a setting on the datatable which I can use to force horizontal scrollbars to show up?

Thanks

David

2

Scrollbar can be disabled directly ( scrollX:false ) or by using autowidth property ( in such case datatable doesn’t have an inner scrollbar )

Any other scroll disappearing behavior is probably a bug.

3

Sounds like I’ve run into a bug, no scrollbars (but scrolling with trackpad is possible) I will post code. I actually develop in Typescript, so I have to translate to javascript first.

4

I have the same issue, when I put some columns into the datatable and call refreshColumns() it hides the horizontal scrollbar. I checked the webix_debug.js and I found a function inside the datatable component called _update_scroll(). My guess is there is the bug because when hasX gets value it checks autoheight and not autowidth. I tried to replace it in the debug js and worked fine. Can you fix this because I would like to use the minified js?

5

Can you please confirm that issue occurs for latest version of Webix, as we have added a similar fix in one of the latest builds.

6

Hello @maksim i have same issue. here is my data table code;

var gridVehicle = {
view: “datatable”,
id: “gridVehicle”,
css: “subgrid”,
select: “row”,
editable: false,
resizeColumn: true,
resizeRow: false,
columns: [
//{ id: “id”, width: 60, css: { ‘text-align’: ‘right’ }, header: { text: “#”, css: { ‘text-align’: ‘center’ } } },
{ id: “label”, width: 120, header: “label” },
{ id: “plate”, width: 150, header: “plate” },
{ id: “loctime”, width: 200, header: “lokasyon” },
{ id: “location”, width: 140, header: “lokasyon zamanı” },
{ id: “company”, width: 140, header: “firma” },
{ id: “gsmNumber”, width: 140, header: “gsm no” },
{ id: “gsmNumber”, width: 140, header: “gsm no” },
{ id: “messagingValid”, width: 140, header: “Mesaj Aktif” },
{ id: “terminalType”, width: 140, header: “Terminal Tipi” },
{ id: “activationDate”, width: 140, header: “Aktivasyon tarihi” },
{ id: “invalidDate”, width: 140, header: “Kullanım Dışı Tarihi” },

       { width: 10, header: "", fillspace: true }
    ],
    url: "../../../services/Vehicles.asmx/GetAllVehicles",
    headerRowHeight: 30,
    rowHeight: 40,
    navigation:true,
    pager: "pagerA"
}

y scroll is ok but x scroll doesnt work i could sure use some help here thanks in advance.

7

Hello @Maria @Maxim as you can see in the link resim upload sitesi - imgim.com my data table’s x scroll doesnt work. also when i add textbox to tabview which is in the right , my data table is disappearing(Cannot read property ‘length’ of undefined error). i could sure use some help immediately thanks in advance.

if this is a bug please tell me.

8

@acihank can you repeat the error in snippet?

9

@integral

code is so long i cant modify but hole code is this https://webix.com/snippet/9aefa744

10

I can see x scrollbar.
the problem might be related to css data.

11

@integral thank you so much it works ! but when i add text box to tab view my data table dissappears.

12

try to wrap textbox into rows layout and append empty space {} after textbox.

{
    rows : [
        { view : "text" },
        {}
    ]
}

or if it is already in rows layout, just add empty space {}