Make list view component display full height of contents when height is already set to 'auto'

Community Show & Tell
, , , ,
1

Ever had a list view component with it's height set to auto...but the height does not get set to auto? Still displaying as a scrollable container with Y-axis auto overflow when you don't want paginated results -- but do want to see all displayed content without it being in a scrolling container?

I found a short custom css solution to assist you :slight_smile:

In using Retool -- I've noticed that the most reliable css property to target which will apply consistent changes on both editor and live versions of your app is the data-testid attribute.

But -- as that is not always going to be a guaranteed attribute between Retool releases, it's good to cover ourselves later by additionally targeting either the id or class attribute -- just be mindful that the id or class attribute may not always stick live.

Try the following:

  1. Place a container component into your app, and give it a name (for this example, let's call it listViewContainer ).

  2. Right click on the container component you just placed, click the Add components to > body option, and select list view from the component options list -- then give your list view component a name (for this example, we will simply call it listView).

  3. Go to your App Settings > Custom CSS section of your app, and place the following CSS:

    .retool-grid-content {

  [data-testid*="listViewContainer"],
  [id*="listViewContainer"] {
    min-height: min-content !important;
  
    [data-testid*="istView"],
    [id*="istView"] {
      height: auto !important;
    }
  }
}

Process Overview (what is this CSS actually doing?!?):

  1. Nesting our styles within scope of .retool-grid-content selector: Best practice I've found is to initially nest all styles for your app within this CSS selector. It ensures the only element(s) you style stay within the scope of the component in which you are targeting.

    :exclamation:Important: The only exception to the rule above is if you are styling either a modal, drawer, or sidebar component. Since these elements are not technically within the scope of .retool-grid-content, we simply target their data-testid completely unnested.

  2. Setting parent container to min-height: min-content !important: Sets the height of the list view component's parent container to whatever the minimum height of its immediate child element is to ensure all child content (the list view component that is in your container component) is displayed without being cut off as a scrolling container.

  3. Setting list view component to height: auto !important: Finishes the job where setting height to auto is currently lacking in the component's inspector menu styling options.

    Note that I neglected to include the letter l from our list view component's data-testid -- this was intentional! I have noticed there are occasions where the element we want to target here can sometimes have a value of a lowercase or uppercase letter (i.e. could be either data-testid*="listView" or could also be data-testid*="ListView". Excluding the l altogether ensures our substring matching will always target the component regardless of capitalization.

Hope this helps and happy coding AND holidays to all you amazing developers out there!

:snowman_with_snow::christmas_tree::technologist::woman_technologist::christmas_tree::snowman_with_snow:

8 Likes
2

Thank you for sharing this workaround, @AJVancattenburch.
Happy holidays to you as well! :santa:

1 Like
3

To be clear, we definitely do not guarantee that data-testid attributes will be stable between Retool releases. So this is a use at your own risk situation. Thanks for exploring the product.

2 Likes
4

Thank you for the info @jacobstern! :slightly_smiling_face:

I updated my original post to reflect that information as to not mislead! :pray:

1 Like
5

Hey thanks, @Paulo always appreciate you, man!

That reminds me that I need to go back and make an updated post on my original post about Applying Custom CSS solutions that adhere to Retool updates as I've found a quite a few edge cases that I'm sure would resolve most use cases since I've learned quite a bit since then (much thanks to the community!).

3 Likes