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

App Building
, ,
1

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

retool-listview-spacing

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!

2

Hello and welcome,

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

before
image

3

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)

try_1
try_1736×384 35.7 KB

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

try_1_wrapper-div

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.

4

Is your inner listview has a fixed height?
image

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

5

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).

6

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.

7

@nmz

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.

image
image744×681 44.7 KB

image

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

2 Likes
8

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:

mstsc_YB2CUkyjUv

._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
9

@nmz
Very nice and good combination use of navigation & breadcrumb components

1 Like