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!