Dynamic/Variable Stroke Line Break

[regal gate]

I'm using a line that's the same colour as the subtab container to hide part of a stroke where my subtab's title is meant to go. Making this a reusable component, is there any way to make it scale automatically depending on the text override, given that you can't resize or reposition shapes? Or is there perhaps a better way for me to hide the stroke in that specific area that can scale nicely based on text?
Thanks a lot in advance 🙂

[barren pebble]

Hey @regal gate not a 100% understand your goal exactly, but it sounds like you are looking for auto layout or constrains

[regal gate]

I have tried using constraints and just didn't really find a way to do it. There's probably a good way to do it with those methods though.
I basically want to add a title to my subtabs' strokes, and break the line wherever the title is, but if I use a line to hide the stroke behind the text, I can't resize it when I reuse a component. What's the best way of doing so?

With line break

Without line break

As you can see, I want to prevent this (if I override the component text)

[barren pebble]

ah so you want the stroke to not show up under the text basically?

[regal gate]

Right

And I want the best way to do it dynamically for when I make text overrides

[barren pebble]

okay so i would have the setup like this

basically having a frame that contains an absolutely positioned rectangle (actually it doesnt have to be in a frame of its own

and a text

so this is actually enough

the rectangle would just be the red color probably, but i made it grey so you can see the difference

[regal gate]

And the inner constraints should scale it with the text, right?

[barren pebble]

for the rectangle i would do left and right constrains

and then the container (frame 208) would have hug content (auto layout)

so it scales with the text (it hugs the content which is the text)

and the rectangle makes sure to adjust based on the left and right of the container

you also need to manually adjust the rectangle in the beginning to line up with the frame 208

[regal gate]

Ok, I'll definitely give that a try. Thanks so much as always Mai :)
You're a Godsend

[regal gate]

I'm a little lost

How did you get the text to render in front of the rectangle with that layer hierarchy?

[barren pebble]

I put a rectangle and a text in a frame, moved the text to the front

and as you can see, the rectangle is absolute positioned

so technically, only the text follows the auto layout

[regal gate]

AH

Gotcha

👍 Magnificent

Scales perfectly too, thanks so much :)