Extending rectangle to width browser's limits

How can I make the width of the rectangle equal to the width of the browser, regardless of the browser size?
Thank you.

You will want to use Hype's Flexible Layout system. Basic steps:

  1. In the Scene Inspector, click the checkboxes in the Scene Size area for Scale 100% width and Scale 100% height.
  2. Add your rectangle and make it the full size of the scene
  3. In the Metrics Inspector's Flexible Layout area for the rectangle, turn on all pins and resize controls:

Screen Shot 2021-05-24 at 12.12.56 PM

Is there a difference between setting all pins and the resize controls vs.
only the resize controls and no pins.

Pins keep the element "pinned" to the margin distance, whereas pins off will allow the position to be proportionate to the resize container.

So if you have pins and resize on, the margins between the edges will never change, and the object resizes within the margins. This means that if the margins exceed the size of the container, the element could collapse to 0px.

If you have the pins off and resize on, then the left position and width would be scaled by the new container size / original container size.

If the rectangle is exactly the size of the container, it doesn't matter as they will behave the same since the margins are 0px. However a common case might be to have a little bit of a fixed border, in which case the pins on behavior is more likely to be what is desired.

1 Like

I have the suspicion that maybe I have not explained my doubt well because I am doing everything you have advised me and it is not working so, I am going to give a picture because, sometimes it is better than giving explanations....

CleanShot 2021-05-25 at 12.13.23@2x


leads to the outer rectangle or group (green border) being stretched all the way.

The middle rectangle or group only uses the pins (left, right) and no stretching.

1 Like

Awesome!!! great!
Thanks a lot!
Always there! :muscle: