Reduce vertical spacing of components when they are nested inside components

Anvil Q&A
1

I have several ‘cards’ that are composed of a RichText component that is inside a Link component, which in turn is inside a GridPanel.

If I put several cards under each other in a LinearPanel, the vertical distance between the text in the card (richtext content) is quite large.

To solve this I first iterated over all components and set spacing above and below to None. It did not help much.

I then tried to reduce the component padding in the css theme, but with little luck. Maybe I did not find the right ones.

Anyone know how to allow the lines of text from each card to be closer?

The more general problem, I guess, is that each component has some padding and having several components inside each other can make the overall padding quite large.

Here is an app which shows the text-lines with the least vertical distance I could manage (still a bit too large!):
https://anvil.works/build#clone:XSDZ4MX6T6EZFSVF=T4M37T2IGXZHPOAL5VG6YZCY

2

My use-case was a collapsible navigation outline. I ended up using an XY Panel, but even then, there were limits, because the rows had to be clickable, and the click-response area didn’t shrink, even for closely-spaced components. Too close, and the response areas overlapped, even when the visible parts didn’t.

I’ll be looking at the Tabulator component as an alternative.

3

Thank you! And, yes, it seems like it must be done using different containers. Some experimentation indicates that part of the problem is caused by the RichText component which seems to have quite large padding around the text. I did not find the default padding for text in the RichText component in the css.

4

I’m always struggling with this. Mostly I resort to custom CSS.