How to remove padding and margin from listViews (nested lists)?

I have some nested lists to build a tree of categories, sub-categories and articles. E.g.:


Since listViews are pre-styled, I get a huge unnecessary gap between the links. It's possible to disable the borders using the GUI, but spacing remains.

Is there any hack to remove the padding/margin anyway? I tried all the custom-css-magic I could think of, but I cannot get rid off that spacing. The space seems to origin from a "min-height" attribute of the parent div.

I even tried things like ... But it only breaks things :sweat_smile:

._retool-CategoriesLvl1 div:has(._retool-CategoriesLvl2) {
  /* some css magic */

Any hint is highly appreciated!

Hello and welcome,

I reduced it by half. I'm not sure how much you want to reduce it.


Thanks so far! Unfortunately, this is not yet a feasible solution.
I try to remove the whole vertical space.

This is the best solution I got so far. But still, plenty of vertical space I need to get rid off. (borders still enabled for better visibility)

There seems to be a wrapper div with a fixed height:


In case this is not possible at all, is there another way to get a neat tree view?

Another (ugly) workaround I thought of was to make the input JSON data "flat", so I only need one listView instead of nested ones. But I tried to avoid this option since it renders the input data useless (or less convenient to work with) in other parts of the app. And I need quite a lot of fx-JS-workarounds to fix other things.

Is your inner listview has a fixed height?

This is a listview with just 1 item, with height set to auto.

Yes, the listViews heights are set to "auto". I didn't even dare to change them to fixed :slight_smile:

As you can see in the first screenshot, the nested lists look exactly like yours. E.g. the listView that only contains "Test" looks exactly like yours. I'm using 3 listviews in my example.

1st listView lists the main categories.
2nd listView lists the subcategories of the currently selected main category.
3rd listView lists the articles of the currently selected main category.

ListView entries don't have any spacing. But new listView-containers cause quite big spaces (and borders, which luckily can be disabled).

would you able to export the json for the app? if app is sensitive, you can make a dummy app with the list and using dummy data in temp state.


Hopefully this will help - the json app is attached as well. Essentially, I used a link list in place of the nested list view. The sub sections each element has a prefix icon, then using css to set the opacity of the icon to 0 so simulate the spacing.


test-app-nested-listviews.json (27.3 KB)


Thanks a lot! I didn't think of combining listViews with linkLists! That's it :slight_smile:

Since you already posted your fixed version of my demo app, I don't need to post mine here anymore. I was not able to post it here since I hit some limitation (thus the DM) ... too many posts in a short time oof

Anyway, I added some more CSS to your solution and it looks like this now:


._retool-CategoriesLvl1 .retool-grid {
  padding: 0px !important;

._retool-CategoriesLvl1 {
  padding: 0px !important;

._retool-LinkLvl1 * {
  font-weight: 600;

._retool-CategoriesLvl2, ._retool-ArticlesLvl2 {
  padding-left: 20px;

._retool-CategoriesLvl2 *, ._retool-ArticlesLvl2 * {
  font-weight: 500;
1 Like

Very nice and good combination use of navigation & breadcrumb components

1 Like