Flexible Layout based on Container Width

  1. What do you want to see in Hype?

The flexible layout engine react to the width of the container it is defined in rather then the only the page width. Page width would be affecting direct children of the stage, though. So nested pinnings would be honored if the container around them is changed in width or height and the contained objects are “pinned”.

  1. Have you found a workaround for this problem?

Using CSS and not relying on the flexible layout engine

  1. Are there examples of other apps with this feature? Or, have you seen examples of this elsewhere on the web? (Please include a URL)

Simple example using CSS

  1. How high of a priority is this for you?


[ X ] Nice to Have
[ X ] Important
[ ] Can’t use Hype without it

1 Like

Thanks for the request.

To clarify, Hype does use the parent container for determining sizing. It does use the window-level “onresize” event though to determine when it needs to recalculate its size, as a while ago there wasn’t a good way to know when containers changed (I believe the MutationObservers can do a decent job nowadays that we can hook into). So if a parent changes, you’ll need to manually call the hypeDocument.relayoutIfNecessary() API to have the runtime adjust the contents.

1 Like


That’s the limit on the current implementation

Yes, the more obscure resizeObserver is based on it

Yes, food for thought. That wount work in the IDE to see it as a preview as the API isn’t present there.

I’ll test if in the current state container based sizing makes any sense without preview on animations etc. and how good it works (if at all) if used with animations.

Thanks for the feedback!

1 Like