[BUG-5356] - Subview open/close on Table causes the columns to resize if subview causes scroll bar to appear on table

I first noticed this in 8.1.9 (after updating from 8.1.7) and it is still present in 8.1.11. If I open a subview on a row in a table, if the subview causes the table to add a scroll bar on the right side due to height reasons, the column widths expand and the table gets screwed up visually. Making the subview small enough to not cause the scroll bar to appear makes the issue go away, but isn’t always feasible.

1 Like

I noticed it too. Definitely a bug. Did you manage to get a work around?

Nothing yet - and no activity on this post either unfortunately. I was thinking of submitting an actual ticket, but haven’t gotten around to it yet.

Found a workaround for now. Changed to subview expansionMode from Multiple to Single. Then I made sure that the minimum height always ensures that there isn’t a scrollbar.

I don’t think that will work for me because of the size of my subview.

Hello,

I am seeing an issue in the Perspective table component. When the scroll bar toggles visibility, all table columns shift to the right, which can gradually push the right column to the edge of the component.

This happens for any scroll bar show/hide reason: component height, number of rows, expanding subviews, etc. I have not been able to mitigate with column widths, including fixed width.

This gif shows me progressively switching the default table between datasets with 10 and 50 rows.

ignition_table_width

Thanks

1 Like

What Ignition version are you using?
Actually, looks like a known issue.

I suppose you could target the table’s rows and set the overflow to overlay, instead of auto.
does not work on all browsers tho (firefox for example, which is why you also have to decleare overflow-y auto BEFORE overlay)

.ia_table__headContainer{width:100% !important;} 
.ReactVirtualized__Grid{overflow-y:auto !important; overflow-y:overlay !important;} 
.ReactVirtualized__Grid__innerScrollContainer{width:100% !important; max-width:100% !important}

The issue is still present on 8.1.12. Has it been fixed on later versions yet?

For anyone else looking for another workaround when scrollbars can’t be avoided, I’ve found that you can prevent the behaviour by adding a kind of sacrificial column at the end - add an empty column to your data, add that column last in the column definition, set its header title to " ", don’t let it be sorted or resized but keep it visible, and set its width to strictly be 0 so it’s not noticeable. Then when the scroll bar appears and disappears, the table eats the last column that’s already tiny and irrelevant rather than one you care about. I would think this should work on all browsers, though I haven’t extensively tested.

This was fixed in 8.1.17.

2 Likes