Expandable Grid Issue : Grid not rendering properly

[njosh]

When I expand the subgrid the rows in the parent grid below it are not rendering properly

Also when i scroll to right end in the parent grid while keeping subgrid expanded the columns alignment is distorting

I think the issue is when width of main grid crosses particular limit after that when you expand subgrid the rows are not rendered properly in main grid.

Below is the plunker to replicate the issue

http://plnkr.co/edit/ir11ft0EawmSQDzaV5un?p=preview

[njosh]

Any update on this?

[gizbo]

Hi,
I'm also experiencing the same issue when enabling expandable+filtering. Looks like the extra ligne introduce by the filter input throws off the controls for the row expansion...
Any ideas ?
Thanks so much,
Yves

[PaulL1]

@jpuri: the behaviour on that plunker looks somewhat unusual. For me on chrome when I expand a subgrid, then scroll rightwards, the subgrid seems to be changing width. Not sure what would cause that.

[pedrobjorn]

I have found the issue, and the fix:

To keep it simple, this is because when using horizontal scroll, ui-grid removes columns that are out of view.

This causes the row width to change, and thus the row next to it to float left, and wrap around.

the solution is simple:

    .ui-grid-row{
        clear:both;
        height:0;
    }

include this in your css.

Hope this helps!

I haven't forked for this fix, since I am not sure how to go about it in the ui-grid css, but if it's necessary I can do!

[savokiss]

Thanks @pedrobjorn , it works!

[amitjain24524]

After the update, google chrome (ver:77) from (ver:76) expanded row not working as expected. Before update google chrome expanded row of 'angular-UI-grid' was working properly, However, It's working fine in other browsers like Mozilla Firefox and Microsoft Edge and also working in older Version(76.0.3809.132) of chrome.

[serDevSer]

@amitjain24524 same issue here.The above thread mentioned fix we have tried but no luck it not working.