How to get a shape to expand its width to edge of a group

Trying to make a stepper and I can’t figure out a way to have lines move to the edge of a stretchable group.

What I’ve tried doing is having lines and circles within a Row group. The circles must be fixed width so the lines touch at the circle. The lines then would go from the edge of the circle to the edge of the group, touching the next line. However, to reach the edge of a group, it’s not a fixed percentage, so the lines never quite reach the edge.

image

Hi @simon.says.2021 ,

Maybe just use the top or bottom border of the row itself as the line and use a negative margin for the circles. Below, I used a text element for the circle (with the step number inside) and a negative bottom margin of half the circle’s height…

@sudsy Thank you, this is a massive improvement. One problem to solve with this approach, how do I handle the start and finish bubbles? All I could think of is pushing them to the left or right with padding, but that won’t work once the page size changes.

image

I don’t know that I understand your specific design/behavior objective, but if you’re referring to the fact that the label is not centered under the circle, then why not simply group them into a center-aligned group so that they move as a single unit. You might then want to use the top border of the row as the line to offset the group.

The beauty of the new responsive engine is that containers with different layout modes can be nested to achieve complex layouts, and there’s often more than one means to the same end. Good luck.

Figured out a solution, I’m not sure if the option wasn’t there when I first started doing this or if I just missed it. For other trying to do the same, which is to create a classic stepper component like this: React Stepper component - Material UI (mui.com)

The answer is that you can change the element width by percentage instead of hardcoding pixels.
image

I now have a functioning stepper that can change color and icon depending on how far along a user is. I use a mix of states in the shared element and a Datatype to store users’ progress.