Nested header misalign (with collapsed sections)

Tags: #<Tag:0x00007efc64e88278>
#1

I have a table that has around 25 columns. By default I am collapsing two sections so that on page load the grid fits nicely on the screen without horizontal scrollbars. This appears to work great but when I expand the two collapsed sections and scroll right the headers get out of alignment.

I do have fixedColumnsLeft set and if I remove this setting the issue goes away but I would like to keep the first few columns fixed so the user knows what row they are looking at as they scroll.

If I only expand one of the two sections there is no problem, it’s only if I expand both and then scroll that I see this issue.

Also, if I do not collapse these sections by default there is no issue, even after collapsing and expanding.

Here’s a jsfiddle that demonstrates the issue.
http://jsfiddle.net/ej0dofhb/
If you expand section I and scroll right the headers get out of alignment.

Any suggestions?

#2

Hi @it1
I tried the same scenario as you wrote but I did the out of alignment behavior. Can you provide your OS/Browser information?

#3

I’m seeing this in FireFox, Chrome and IE. In the screenshot below notice the P header should be above the column with C1, C2, etc.

Pasted image1008×336 4.1 KB

#4

Thanks for sharing @it1
I got the same issue

nested-headers-issue.gif816×470 113 KB

I’ll mark this issue as a bug.

#5

Hi @it1

can you check if the following issue is also replicable in v1.10.2. I wasn’t able to replicate it.

#6

As I am not able to replicate the issue in the latest version I am closing it. However, if you still have the same issue please create a new topic and create a demo where we’d be able to replicate it.

#7