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

chris · June 16, 2015, 9:50am

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.

You can see the problem on this image:

maksim · June 16, 2015, 2:33pm

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.

chris · June 17, 2015, 8:03am

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); :)))

maksim · June 17, 2015, 9:43am

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

chris · June 17, 2015, 4:06pm

Im looking for a solution for enduser.

maksim · June 17, 2015, 4:22pm

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.

chris · June 17, 2015, 7:21pm

Thank you for assistance!

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

maksim · June 18, 2015, 11:35am

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

scottjensen · March 22, 2017, 3:07pm

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.

scottjensen · April 4, 2017, 2:46pm

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

maksim · April 7, 2017, 5:04pm

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)