Smart layout - override text with blank and reduce height of symbol

I’ve got a smart layout for a card, with a few text labels…
Subtitle, title, description.

The smart layout works when these items wrap onto a new line - causing the card to expand in height. The labels have various vertical margins between them (spacing).

Any one of these labels could be blank - here is the issue.

I want to provide a way to over-ride each of the labels with blank, and have them (and their vertical margin) removed from the symbol.

The only way I can think of doing this currently is overriding with a space character - which obviously still leaves the text element with height. I’m stuck, please help!

Create symbols for every text style and replace the text styles in these cards for a symbol. When you hide the symbol, it will take away the smallest margin between. If the margin is the same then it removes one.

2 Likes

What @KarlCanBeCool suggested is currently the only way. That said, we’re planning to add the ability to hide any layer from a symbol instance, which will this use case.

4 Likes

Thanks Karl, Paulo.

I’ll try this out.

@KarlCanBeCool I’m not sure what you meant by taking away the smallest margin between or if the margin is the same it removes one?

When layers are removed from a group or symbol with Smart Layout, we’ll also collapse excess spacing around the removed element. If the spacing before and after the element is NOT the same, we’ll keep the larger one, but collapse the smaller one.

In you example, if you were to remove the description copy, the space above it would disappear too, and only the space below it would be kept — because it’s the largest of the two. And, it seems that’s exactly what you’d want.

1 Like