i’m trying to make a component whose height will adjust automatically depending on the text height.
Seems like i can(t post images directly here.
Have a link there : https://i.ibb.co/LJCBFB8/Steps-List-Figma.jpg
Nothing special concerning the text itself, using auto layout and “hug contents” on the top layer.
However, i can’t find a way to have the line below the step number adjusting automatically.
While playing around with autolayout and “fill container” on different levels, i still can’t figure a way to achieve the expected behavior.
Seems that having the line “floating” under the number is a blocker there, not sure.
Note: the description will be optional (on/off property)
Holy crap you’re my savior
Thanks so much, I was struggling so hard.
I guess key was using a frame as the line (plus playing with paddings and alignments)
Again, thank you sir!
The key is not having a frame acting as a line, you could just as well use a rectangle or a line. The key is the combined autolayouts.
The component itself is a horizontal AL, with two child vertical AL frames.
The top AL is set to hug contents as well as the AL containing the texts, but the AL containing the line is set to Fill container and so is the line.
Oh I see, thanks.
However there an issue with your solution : you have set a Box with fixed height on the variant without description. This way, the line doesn’t expand.
If you remove that fixed height, the line expands when the title is long enough, but diappears when the title is 2 lines or less.
A trick could be : removing that Box, and adding a transparent 1px width frame with fixed height at the top level, acting as a “min-height” spacer.
