Column Alignment fails on large column sets with expandable row

[lookwhatisee]

When a large number of columns are present in the grid utilizing the expandable row will cause the subsequent rows to become misaligned. Additionally, scrolling to the right reveals that some columns are not rendering data at all towards the end of the grid (horizontally) for the expanded row and subsequent rows.

I have created a plunker to demonstrate the issue. Any help on this would be appreciated.

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

The following examples show how data in the grid not displaying in the correct columns for rows following the expanded row:

The following examples show how data in the grid is pushed left as the user scrolls to the right with the row expanded and many columns in the grid.

[amalrajcharles]

Hi,

I too am facing the same issue. I was trying to create a expandable Grid. And during expand operation the Grid Renders the rows below the expanded content in an overwritten state i.e. some of the below rows layout is disturbed.

The Expanded Grid also has columns render with the whole width of grid. Below is the example that show the error.

Example : http://plnkr.co/edit/p5ValSbg2ZZmSkOn1j3J?p=preview
Browser Used : Chrome v46

Does anyone have a work around fix ?

Thanks, Amalraj

[rappol]

im having the same situation. when we scroll down the expandable grid...it jumps many rows...

[LuckyBaquet]

I am experiencing the same issue with v 3.1.1 but the table works as expected when I upgrade ui-grid.min.css to v 4.0.4

[MJasas]

Found a workaround for this issue, at least fixed my case. Just add this CSS:

.expandableRow { width: 100%!important; }