Column Misalignment when using relative-width padding
Column Misalignment when using relative-width padding
druegamer
Posts: 21Questions: 5Answers: 0
There is a column misalignment issue with scrolling enabled. The following is a link to a demo demonstrating the issue: http://live.datatables.net/widavife/1/edit . As far as I can tell, setting the padding to pixels fixes the issue, but only on 100% zoom. The style editor has pixels for padding for cell elements, but as far as I can tell is not specified as being required. Presumably this is a sub-pixel issue?
My questions are:
- are pixel widths a requirement for padding (and presumably borders as well?)
- are zoom levels not guaranteed to have aligned columns? is there a way to guarantee this?
Tested on:
- Chrome: Version 67.0.3396.99 (Official Build) (64-bit)
- Firefox: 60.1.0esr (64-bit)
- IE 11
This question has an accepted answers - jump to answer
Answers
This it the page for me with Chrome at 125% zoom:
It appears to be okay.
Very likely it is a sub-pixel issue though. Browser zoom, I've found, is exceptionally difficult to program from since the browser abstracts it away from the dev. As such I only target 100% zoom and if that renders correctly but zoom doesn't, then its likely a browser issue I'm afraid.
Allan
Thank you for the response, allan. I had an inkling that zoom levels would be out of our hands on this one.
I'm still seeing a misalignment on this particular scenario even on 100% zoom in chrome:
Currently the padding for td and th elements here are in 'em'. It appears setting the padding using pixel units (instead of relative units) seems to fix this. Should we be avoiding relative units for padding in cell elements? The generated css in the style editor uses pixels, but I'm wondering if that is a hard requirement.
No, using relative values shouldn't make any difference. They are more likely to cause sub-pixel corrections to be made, which I expect you are seeing here, but it should still work.
What OS are you running on? I've just tried the page again (Fedora 28, Chrome 66) and don't see any misalignment.
Thanks,
Allan
This is on CentOS Linux release 7.5.1804.
I also have a Windows 7 machine I'm testing on, and do not see the alignment issue on either chrome or IE on that.
So it looks like right now this is likely a quirk with the OS, unless you think there is underlying issue here?
I am still seeing misalignments on our more complex tables of our application on Windows 7 and was hoping this was a simple reproduction of that, but it looks like this particular case isn't quite the whole issue.