Misaligned cells in ListGrid

[jclaxton]

Hello,

I few months ago my company sponsored a feature for ListGrid to support frozen fields with auto row heights. We're having some trouble getting the cells to align using certain formats. Bold text (and possibly empty cells) seem to cause problems. I've attached a test case, you should see the misalignment right away -- in some cases scrolling around seemed to snap things back into place.


Seen in Chrome and IE
SmartClient Version: SNAPSHOT_v12.1d_2018-09-04/LGPL Development Only (built 2018-09-04)

Thanks,
John

[Isomorphic]

Thanks John - we have a developer looking at this. We'll follow up when we have more information for you

[Isomorphic]

Removing the "!important" specification on the border applied by getCellCSSText fixes the issue (and retains the border).
This is due to an implementation detail around how frozen vs unfrozen variable row heights are kept in synch. It may be possible to work around at the framework level but the easiest fix would just be to remove it.

Is there a case where this !important marker is required for you? Can you clarify why this is present?

Thanks

[jclaxton]

OK, thanks. The "!important" was just left over from an older test case; we don't need support for that at the framework level. My actual implementation doesn't use it, but I'm still seeing the issue. Let me see if I can get you a more representative test case.

[jclaxton]

I was able to recreate the issue with that same test case, minus the "!important" keyword. It seems like you have to scroll in a particular way to see it, and even then, it doesn't happen every time. In the attached gif, I started recording in a misaligned state, clicked on a frozen cell, scrolled to the top, and then scrolled to the bottom. I used the scroll wheel the whole time. Also, about a third of the way through scrolling down, you can see the scroll bar jump to the top.

These details seem to be important for reproducing it:

• Having mouse focus or hovering over the frozen column
• Using the scroll bar
• Resizing your window so you have a lots of room to scroll (or just set the grid height to about 500px)

[Isomorphic]

Thanks for the extra information - we're taking a look.

[Isomorphic]

We found we could reproduce this issue in Internet Explorer, and have made a change which should address this.
Please try the next nightly build, dated September 14, on the 12.0 or 12.1d branch

Regards
Isomorphic Software

[jclaxton]

Thanks for the response, sorry I'm just getting to testing now.

I'm still seeing the issue in the 9/24 nightly build. IE seems somewhat more stable, but I can still break it if I use the scroll wheel quickly. Chrome seems the same at the last build. Both seem to get better as you leave the page open, so a good way to see the error is to reload the page and use the scroll wheel to quickly go to the last row (that's how I got the attached screenshot) in IE.

I don't mean to be a nuisance over a minor issue, but the issue is worse in my actual implementation, which is considerable more complicated. I'm hoping that addressing the issues that I was able to isolate in the test case will fix the more nebulous issues in my app.

Version: SNAPSHOT_v12.1d_2018-09-24/LGPL Development Only (built 2018-09-24)

[Isomorphic]

Thanks for letting us know. The fix we introduced was indeed IE-focused and would resolve a common misalignment case. We are still working (in the background) on another case where things could render incorrectly with certain scroll interactions, but we did not believe this could impact your particular usage.
Anyway - we're still on this and have noted your additional manifestation of the issue. We'll follow up when we have more information for you.

Regards
Isomorphic Software

[jclaxton]

Has there been any progress on this issue?

[Isomorphic]

Are you still seeing a problem with the latest build?

[jclaxton]

Yes, I tested in Chrome and the behavior seems to be the same.

[Isomorphic]

Ok thanks for letting us know. We have made some changes in this area but this is proving surprisingly tricky to get fully resolved.
Can you just confirm the following points:
- you're still testing this using the code from the first post (with the "!important" directives removed from the CSS). If that's not correct, can you post whatever sample code you are testing with so we can be sure we're looking at the same thing
- you're using Chrome,
- ensuring the Window is sized large enough that the grid height is about 500px,
- clicking on the frozen columns
- scrolling up and down using the mouse wheel.

And the result you're seeing is that the frozen and unfrozen body cells become misaligned at some point, and the scrollbar thumb appears to jump around oddly

Is that all accurate? Any details we've got wrong / anything to add?

(As an aside - we do consider this a serious issue to resolve)
Thanks

[jclaxton]

Right, my test case hasn't changed. A couple notes:

-It does jump around less. Occasionally I'll see it jump up a bit, but I'm no longer getting into loops where it keeps jumping.
-Clicking on a frozen column doesn't seem to be an important detail anymore. Clicking the unfrozen one and quickly scrolling to the bottom causes misalignment about 50% of the time.

Thanks for chasing this, I know these graphical/timing issues can be tough.

[Isomorphic]

Hi again!
Please try the next nightly 12.0p branch (Nov 3). Let us know if you continue to see the problem.

Thanks and Regards
Isomorphic Software