Table Component Auto Height Issue

[sgodoshian]

Goal:

In my Retool web app, I have a Main frame that has more than one component. One of these components is the built-in Table (new) component. I want this table component to have no scrollbar, so I configure it to Height: Auto. However, the <div> that contains my table has a max-height: 100vh, so my table will still scroll.

Workarounds:

I cannot use the workaround from this post because I have > 1 component in the Main frame

My current workaround is to add this custom CSS:

div[id^=tbl_property_capital_projects] {
  max-height: none !important;
}

Steps to Reproduce:

1. Create a new retool web app with a main frame that contains a Table (new) component and another component
2. Add enough data to the table such that it extends past the viewport
3. Under the Appearance configuration settings of your table component, set Height to Auto
4. Observe that the table has a scrollbar

Details:

I'm on Retool Cloud Business Plan. I'm using all built-in retool components. The component in question is Table (new) component

Screenshots:

App json export:

Table Auto Height Scroll Bug.json (13.8 KB)
^ this is not the app in screenshots (that app contains sensitive info.), but a replication of the bug. I also included the CSS workaround in the Custom CSS, it's commented out but you can uncomment it to see it in action.

[bobthebear]

I came across something similar, if i remember right i ended up creating another container for each component which i use as a sort of wrapper. so maybe try adding a container removing its header/footer, margin and padding. this way when you put your table in it you can enable 'Expand content to fit' and the table will expand all the way to the border. you should be able to now resize the container holding your table to whatever size you want.

[AbbeyHernandez]

Hey @sgodoshian,

I submitted this as a bug. Thanks for sharing so much detail on this!

[MiguelOrtiz]

Can I just add to this bug that whenever there's a summary row in a table with auto height, the scroll bar will appear just to be able to scroll down the last row. It seems the auto is not considering the summary row.

[AbbeyHernandez]

Logged. Thank you, @MiguelOrtiz!

[Martin_Avery]

Is this the same issue as the double scroll bar showing when a long table is set to auto height and grows beyond the viewable screen area? I found another thread for that that says its been resolved and can longer comment Closed thread but I still have the issue. Am I missing something?

[sgodoshian]

thx @bobthebear! I think your solution would work if I were fixing the height of my table, but I want the table to be as tall as the content inside without any scrollbars (auto height). I only want one scroll bar on my page (the page scrollbar).

[sgodoshian]

I get those double scrollbars too. I haven't found a way to eliminate it without using custom CSS.

[jpmin]

+1 same issue.

[j_hopeman]

Same problem here as well.

[Tess]

Thanks for chiming in! This request is in our backlog internally, so unfortunately, I don't have an update yet. I shared your feedback & +1s with the team, and I'll follow up here if it gets prioritized