wide expansionLayout flickers outside of narrow ListGrid's shaded background

[nitroamos]

I've isolated an example where an expansion panel can easily expand outside the bounds of the ListGrid's background colored area. I've attached a gif of what that looks like as well as some sample code to reproduce the problem. Just dump the code in the "Hello World" demo and open the first row (as in the gif):
https://www.smartclient.com/smartcli...izeIncrease=10

I'm not certain how wide I really expect it to be (I'd guess not wider than the columns?), but its inability to decide its width is a jolting visual effect. If I do things like resize the window or move my mouse over the ListGrid then the width sometimes flips back and forth.

(Note: if you keep playing with this sample code, you'll eventually see exceptions in the console and in some cases it'll result in infinite errors(?). I don't see exceptions in my real code, so I'll assume something happened when I generated this test case -- and I don't care about that).

Thanks!


Google Chrome is up to date
Version 62.0.3202.94 (Official Build) (64-bit)

[Isomorphic]

We recently worked around a newly introduced Chrome bug where widgets that are marked as hidden will be rendered by Chrome anyway, so if you don't have the latest SmartClient, that could explain the flicker.

However, it's invalid to create an expansion component that is wider than the width of all fields put together anyway, so it may not matter to get the workaround.

[nitroamos]

I was able to reproduce this in the "SNAPSHOT_v12.0d_2017-11-29/AllModules Development Only" showcase, so the bug fix is probably unrelated.


This problem is somewhat common for me in this project. I have the parent ListGrid fill the window and then on my desktop monitor I often make the browser wide. Not all of the ListGrid's fields are visible and many are constrained with maxWidth. Related side note, autoFitFieldWidths is wonderful, but I prefer to not fill the ListGrid than to delegate all extra width to an individual field. What I'd really like is to evenly distribute extra width to all eligible fields rather than delegating to a single field.

[Isomorphic]

Do you have some way of recreating this problem with an expansion component with a valid size? Because, as we mentioned, your component appears to be mis-sized.

It also appears you are calling getRecordComponent() during getDefaultFieldWidth(), which is also invalid, as that would be done during a redraw (the docs mention this is not allowed). This could potentially cause the component to flicker in and out because it is being drawn at top level rather than as a grid child. If this is happening, you'll notice the "Clears" and "Draws" counts going crazy in the Developer Console, and you'll get terrible performance.

[nitroamos]

Do you have some way of recreating this problem with an expansion component with a valid size? Because, as we mentioned, your component appears to be mis-sized.

I don't understand your question. My intent is for the top level ListGrid ("details") to fill the window and also for the VLayout returned by getExpansionComponent to fill its parent and introduce horizontal scroll bars if it's too wide.

It also appears you are calling getRecordComponent() during getDefaultFieldWidth(), which is also invalid, as that would be done during a redraw (the docs mention this is not allowed).

Ok, it's easy enough to replace that with a hard coded, extra wide defaultWidth (attached) and I still see the problem.

[Isomorphic]

You're also calling getExpansionComponent() yourself, in advance of draw - have you checked on whether you are seeing a series of clear/draws? Both of these APIs are intended to be override points that you implement, where we then carefully manage the placement and lifecycle of the component. Calling them yourself obviously defeats all of this and is likely creating your problem.

Further, you're hoping for scrolling, but the component you've returned does not enable scrolling (via overflow:"auto").

[nitroamos]

Let's try a different approach for this issue. If I start from this example:
https://www.smartclient.com/smartcli...izeIncrease=10


and change the code to look like this:

isc.ListGrid.create({
    ID: "countryList",
    width:"100%", height:300, 
    alternateRecordStyles:true,
    expansionFieldImageShowSelected:true,
    data: countryData,
    fields: [
        {name: "countryName", title: "Country",maxWidth:100},
        {name: "capital", title: "Capital",maxWidth:100},
        {name: "continent", title: "Continent",maxWidth:100}
    ],
    canExpandRecords: true,
    expansionMode: "detailField",
    detailField: "background"
});

and open one of the expansions, I see continuous flickering as I drag the window's width.

[Isomorphic]

This one's been fixed for builds dated December 13 and later.

[nitroamos]

I neglected to acknowledge that this fix works. Thanks!