Table Component Auto Height Issue

App Building
, , ,
1

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

image
image1440×449 56.4 KB

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:

image
image1246×592 86.3 KB

image
image1320×592 197 KB

image
image1318×592 224 KB

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.

2 Likes
2

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.

2 Likes
3

Hey @sgodoshian,

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

1 Like
4

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.

5

Logged. Thank you, @MiguelOrtiz!