Datatable header and column are not aligned properly as we scroll to the right

Webix JS
#1

webix datatable header column lose alignment as we scroll to the right.

I tried to use the Inspector to see why it was happening and I noticed the header picks up ~.8px more width than what the column is assigned

for e.g. if my column is
{
id: “Name”,
header: “Name”,
width: 120,
sort: “server”
}

Then the column header renders under a td i.e.

with width of 120.889px

I am guessing somewhere the JavaScript is computing the additional width for the header. Is there anyway to fix it?

I do not have any borders or custom styling to the datatable.

I would really appreciate help with this

#2

Hello @kchhatani,
Unfortunately, I can’t repeat the described issue.
Could you please share a sample (using our snippet tool) that shows the problem?

#3

@annazankevich
Please use this snippet to reproduce the issue:

https://snippet.webix.com/sr6f9kmg

And just to make the loss of alignment more obvious, I added the borders to the headers and the data cells. You can remove those and still see the loss of alignment and also, the more columns you add the more alignment it loses because every column starts derailing by almost half a pixel

Please let me know if you need more information

#4

@kchhatani
probably you need to use dedicated css classes for table borders
https://docs.webix.com/desktop__material_skin.html#bordersofcolumns
https://snippet.webix.com/mf7ff57v

#5

I can write that border styling but it wont help. If you want you can try and edit my snippet or edit the one you have posted(which also has loss of alignment).

There will still be loss of alignment as we scroll towards the right unless i force the cell border width to be 0.8px above the header border width which seems like a really bad idea and a bad design as well :frowning:

#6

@kchhatani
I have checked my snippet once again and realized that your issue appears in chrome (and chromium based edge) when page is zoomed (in my case only 125% and 175%). no problem in firefox.

#7

@integral I just ran your snippet in chrome without any zoom and I still see the loss of alignment :frowning:

For now since it only works in Firefox, is there any temporary fix for Chrome?