Header Scroll position reset after column reorder

[slayer303]

Hi,

I have 10 columns in my grid a horizontal scroll is shown, when I scroll right then try to reorder some columns this cause gird misaligned with the header.

I have another issue related to misalignment, I want to add new column to the grid without losing horizontal scroll position is that possible ? Because when I use grid.setColumns(columns) or of course this.columnDefinitions = columns , the header scroll bar is reset while the grid data still
at the same place.

Let me know if you have any idea for fix that.
Thanks for your Grid it was really very helpful

Cheers

[ghiscoding]

No idea but this is not an issue with Angular-Slickgrid, rather an issue with the core library SlickGrid, you should search the issues there and maybe also check Stack Overflow.

[slayer303]

I tried the same example with both SlickGrid and Slick Angular, it's working fine in the slick grid ,

Try with those 2 examples :
resize the first colulmn until a scroll bar is shown then scroll to the right and reorder second and third column => misalignement
library SlickGrid,
http://6pac.github.io/SlickGrid/examples/example2-formatters-event.html
Angular-Slickgrid
https://ghiscoding.github.io/angular-slickgrid-bs4-demo/#/basic

The same thing with add column working fine for slickGrid but not for angular SlickGrid

[ghiscoding]

I cannot see and understand what you mean, can you make an animated gif (I use ShareX) or at least a print screen. The basic grid has fixed height/width.

[slayer303]

Ok This one from
Slick Grid Angular
https://i.imgur.com/LEzAM4k.gifv
This from Slick Grid JS
https://i.imgur.com/awFPmrd.gifv

[ghiscoding]

Sorry but even if I try on my side, I cannot replicate that behavior. Are you using IE11 by any chance? It seems to be all good in Chrome

[slayer303]

I just tried it with chrome it's working, but with firefox and IE it's not.
Is there a css issue or kind of ?

[ghiscoding]

You need polyfill for IE, but even then I don't want to support IE since it will be end of life by year end. As for Firefox, it should work but again this issue has to come for the core library, I'm not handling that portion (drag & drop of a column). Angular-Slickgrid is just a wrapper on top of the core lib. I'd be surprised the issue coming from my lib instead of the core, though I can't explain why the core doesn't show the issue

EDIT
Weird, it seems to be fixing itself by moving the scroll by a pixel. The only thing that I can think of is that if there was ever a fix in the core lib CSS, then the CSS used in my lib is not in sync with the core lib because I converted to SASS long time ago and I'm not using any of the core lib CSS directly. Searching the core lib for this kind of issue might be the best to do, else trying to find the differences is kinda hard to compare SASS and CSS, or just compare in the DOM but even then it might take a while. My styling is also made for Bootstrap, so that adds up to the differences.

[slayer303]

I see your point, but as I told you in the example it works fine with SlickGrid using firefox but not with Angular-Slickgrid.
Anyway I will try to find a work arround but the grid will be flickering if I set the header scroll position to the position of the grid

[ghiscoding]

Unfortunately, I don't have the time to look into this. I'm already trying to finish up all the unit testing and I have no cycle to look into this.

[ghiscoding]

@slayer303
I think I found it, there was this commit for Firefox that was not in my SASS styling. The comment says that it should be ok for modern browsers but as you found out it's still an issue.

You can see a before/after in PR #300.

I just released a new version of the lib couple of hours ago but I could push a patch version in the coming days.

You could also patch it yourself in your code to see if the fix works in your grid. You will need to change your styling encapsulation to encapsulation: ViewEncapsulation.None, to change the style it globally. Could you please confirm that the patch works for you. Thanks

.slickgrid-container {
  .slick-header-columns,
  .slick-header-column {
    box-sizing: content-box !important; /* this here only for Firefox! */
  }
}

[slayer303]

Thanks so much, it's working correctly! It also works for IE.
Thanks for your time and help. ;) Good work.

[slayer303]

It also fixes the second issue about adding a new column without losing the scroll bar position of the header.

[ghiscoding]

@slayer303
Just released a new version 2.11.1 which includes the fix and another backend feature.

Cheers ⭐️