Bug: Browser Zoom-out - in Datatable header and columns not align

Webix JS
#1

When you Zoom-Out in a Browser (Chrome, Safari) i.E. 90%, 67%… the headers and the data cells do not align correctly.

Best to see if there are many small coulums…like in this snippet.

http://webix.com/snippet/e23d56f4

You can see the problem on this image:

https://goo.gl/V8UHYm

#2

I can confirm the issue, but I’m not sure that we will be able to fix it. The issue was caused by the zooming behavior in WebKit where DIV and TD tag with same border styles have different on-screen size after zooming.

Anyway, I will register the bug.

#3

Hint: as i saw, the error does not occur on Zoomfactor 50% - so it may be in conjunction with different roundings.

Suggestion as workaround:
could you implement a general ZoomFaktor? Scaling Fonts, Widths, Heights etc? webix.zoom(0.78); :)))

#4

Do you want to make this setting accessible to end users , or just an option in skin-builder will be enough ?

#5

Im looking for a solution for enduser.

#6

If you need to have a few zooming steps only, it is still possible to generate few skins and change CSS on the page when necessary. To apply a new skin to the existing view you will need to reload page anyway, so it is not very convenient.

If you have a support subscription, please open the ticket. I think it is possible to create a patch to cover the original issue, by changing the way how the header of datatable is rendered. We are not ready to make such big changes in the main codebase though.

#7

Thank you for assistance!

Think CSS skins will not help due to widths in webix components are still the same then, are’n they?

#8

Yep, if width was fixed in pixels it will be preserved anyway.

#9

I am seeing this issue on chrome with the zoom set to 100%. Changing the zoom to 80% aligns everything. Use the snippet provided by Chris, http://webix.com/snippet/e23d56f4.

This is not happening in IE (11). In IE that the columns remain aligned after zooming in and out.

#10

Any thoughts on this issue? This is an issue in chrome and happens without needing to zoom in/out. Doesn’t happen in IE but majority of my users are using chrome so would

#11

without needing to zoom in/out

If it occurs for you even without zooming, it can be caused by some other reason ( most possible a CSS conflict with some plugin ). The same sample looks fine for me without zooming.

With some zooming levels the gap really occurs (175% for example)