Misaligment when resizing and presence of vertical scroll

[marianopeck]

Hi Maca,

I found a reproducible misaligment when we resize a column in the presence of a vertical scroll. Here is the example: http://live.datatables.net/IroN/93. To reproduce, make "Account" column widther, then without refreshing the page, horizontally scroll to the right and scroll until the very very end (when you cannot scroll anymore). There the missaligment should happen. And then, as soon as you refresh the page, it gets correct.

Could you see it?

Thanks in advance

[maca88]

Yes I see, I'll try to fix that.

[marianopeck]

I found a similar issue which I am trying to generate an isolated test as well... very similar to this one, but I cannot make colPin to work in this example: http://live.datatables.net/IroN/98/edit Any idea why? cannot see anything strange...

[maca88]

ColPin now checks the presence of Bootstrap like HERE. So you have to include the Bootstrap.js or add the following line of code: dt.ColPin.defaultSettings.classes.iconClass = 'glyphicon glyphicon-pushpin';

I've added the boostrap.js to your example: HERE

[maca88]

I clicked on the worng button :)

[marianopeck]

Thanks. Ok, here is the OTHER reproducible problem, which seems related (presence of scroll). http://live.datatables.net/IroN/102 you need to RIGHT pin the column "Original OFX String". Then, you need to put the focus of the mouse over the "Original OFX String" and scroll down until the very very end. There, you must find another misaligment between all the other columns and the right most column. Can you see it? This might be FixedColumn bug rather than ColPin.

Thanks!

[maca88]

This is a problem of FixedColumn plugin. The only workaround I have in mind is to add a little css: div.DTFC_RightBodyLiner { overflow-x: hidden; } Your example: HERE

[marianopeck]

Thanks Maca. I added that workaround (also for overflow-y) and it works correct. Thank you very much. You are giving even more support that DataTables developer ;) I am trying to make ColVis work with my kind of headers and I failed.... https://datatables.net/forums/discussion/22091/colvis-and-customize-column-title-extraction#latest I saw you did use ColVis in your examples. Did you have a case like mine? I guess not.

Btw, I will close the issue.

Thanks!

[maca88]

you have to use the label option of ColVis plugin:

Example: http://live.datatables.net/IroN/104

[marianopeck]

Oh....you totally rock! I surely own you some beers. Hope you are not too far hahhaha. Best,

[maca88]

I've fixed the misaligment issue. Try your example again =)

[marianopeck]

mmmm did you commit? I am trying http://live.datatables.net/IroN/102 and I still see it.

[marianopeck]

Also...when you mean the issue is fixed...I mean I don't need to use anymore this workaround:

  div.DTFC_RightBodyLiner {
      overflow-x: hidden;
     overflow-y: hidden;
 }

?

[maca88]

I've tried your example (http://live.datatables.net/IroN/102) and its working fine for me (tested in Chrome and Firefox), try to refresh with shift+F5. I only fixed the issue described in your first comment. You still have to use the above css for the pinned columns.

[marianopeck]

Ohhh sorry, you were talking of the test case when I made the "Account" widther and the scroll horizontally until the end right? Yes, I see that one fixed. And with the css workaround of div.DTFC_RightBodyLiner I see the right pin of "OFX Original String" fixed as well. So we can close the issue right?

Thanks!