GUI element adjust mode stretch horizontally, but fit vertically

Any idea how to do this easily?

I want a black bar to stretch to the full width of the screen horizontally always, but vertically I want it to scale with other nodes like text to maintain relative scaling.

The incorrect way which gets the result would be to set the node to fit and also set the x scale a few times larger than the window size. Then anchor to the top and pivot north. I’ll use this until someone gives insight or I think of how to do the proper way…

Another hack is to place the black node behind the content one, effectively hiding the fact your black bar scales vertically as well.

From the top of my head though, there is no way to create non-uniform scaling. That would require code or new features to anchors so you can define stretchable areas.

On that note though…
It would be neat to have a layouting Library for those sorts of things.

Verical, Horizontal, Grid. Layouting.

Size and origin based on parent.
Width: % or pixels
Height: % or pixels
Anchors: X 0-1, Y 0-1

1 Like

Indeed! For reference, Sketch does this beautifully, where you set the sides to which an object should pin to, as well as options to fix an object’s width/height.

resizing

3 Likes

You post gave me another idea: set the node to stretch, but put the anchor point at the south. Then you place the bottom of the node where you want the height to be. The parent node must also be stretch for this to work. And north/south/whatever is relative to whatever placement you want it to be. The stretch amount is still more than it needs to be, but doesn’t require any scripting this way. Also in my case the parent node is anchored to north with Y anchor top.

Edit: after a little more testing with this method it’s not perfect. May work with some designs but previous method would work better for what I want.

3 Likes