Bar and column not quite insync

[DataTables]

While playing with the demo I noticed that if you grab a bar and drag it, it doesn't quite stay insync with the columns. To see, pick up the bar between the first and second columns and then drag it all the way to the left, then as far as possible to the right (blocked by the next bar - nice touch!). The sorting icon can now be seen to the right of the drag bar. If you use the inspect you can see a bit more easily the cells not lining up with the bars.

I suspect its a sub-pixel rendering issue. On each mouse move there is just a small offset which is gradually adding up. One option might be to use getBoundingClientRect() which will get sizes with sub-pixel precision, while another option might be to redraw the bars to match the columns when mouseup is triggered (although not quite as nice UX).

One way or another - this is superb and easily the best column resizing I've seen for DataTables!

[smasala]

@DataTables Thanks for trying it out! I can't seem to replicate it. What browser are you using? I tried FF and Chrome.

[DataTables]

Hah - I've fallen into the trap! That's always the first bit of information I ask for as well.

Chrome 59.0.3071.86 Linux (Fedora 25). I'll try it on a Windows machine later on.

[smasala]

:)

Got the latest version of the extension as well?

[DataTables]

Yup - completely unable to reproduce the issue on Chrome Windows. I'll try Chrome Mac when I get a chance as well. Possibly something odd with the font's available on Linux perhaps...

[smasala]

Works on Mac Chrome and Mac FF for me too. Don't have a linux machine to test it on. Feel free to create a pull request if you find a fix for it 👍 :) :)

[DataTables]

I think I've figured out what is happening - I've just managed to reproduce it on a Mac as well. Its a resize of the table / window that is causing it (I must have shown the dev tools and resized them or something yesterday).

To reproduce, resize the window or show / hide the dev tools, so that the table width changes in the container. The bars will be offset and it gets a little worse as you click and drag them.

Don't you love wishy-washy bug reports... :)

[smasala]

haha, love it :) I still can't reproduce it though :( I can resize the window to my hearts delight and still looks fine to me :) Got any screenshots?

What I have noticed though is that something similar happens (rarely) on refresh. It must be a timing problem that DT is not quite finished yet and ColResize already starts drawing. I assume with your dev console you have cache disabled? This could lead to extra timing issues.

I'm using the init.dt.dtr event... is there an even later one?

[smasala]

@DataTables managed to replicate it :) Small window size, then enlarge it and bingo!

[smasala]

@DataTables new release, should be fixed now :) Thanks for posting.

[DataTables]

Nice one - thanks!

Any chance you could put a live example that folks could load in their browser somewhere (i.e. without needing to npm install it). I'll add it to the DataTables news feed on the home page as I think this is going to be a popular extension.

[smasala]

I will do, I'm just updating the table to allow for scrollY and fixed headers. I've uses the solution I posted in https://github.com/DataTables/DataTables/issues/956. So you can take a look at it for DTv2. Extension uses [].indexOf()... so it'll run only in IE9+. There is a polyfill though for older browsers: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

[smasala]

@DataTables here's your demo: https://smasala.github.io/ColResize/

[DataTables]

Awesome - linked on the DataTables home page - Thanks!

[smasala]

Thanks 👍