Creating a Flexible Tumult Hype Document within a DIV with no set 'height'

Responsive Responsive Layouts
10

Your document doesn't contain multiple layouts nor flexible layout, so @h_classen's script doesn't quite apply here/yet. I'm going to move this thread to its own topic.

This is the general approach you can take... hard to know how it went wrong for you without that version though! The explicit steps would be:

  1. In the Scene Inspector, check the Width Scale 100% box and Height Scale 100% boxes.
  2. Select all elements by pressing Command-A
  3. Click the "Group" button in the toolbar
  4. Now there's a group, but it is a bit bigger than the bounds of the scene since you have elements that extend over it. So you'll just want to use the scene editor to move the top/left/bottom/right boundaries of the group to match the scene.
  5. Set the Group's Content Overflow in the Metrics Inspector to "Hidden"
  6. Now we can tell this group how you want it to resize. With just the group selected, go to the Flexible Layout section of the Metrics Inspector. Turn on all the pins, and the resize boxes. You should end up with the preview being a blue box that always entirely fills the shape.
  7. Now you'll want to check "Zoom contents" in the flexible layout settings. This tells the group to scale all the inner elements when resized.
  8. And finally set the Scale behavior to "Shrink to fit" - this ensures the contents will always be shown, though may get a little smaller.

There's also some code that you can just paste in a manner similar to your first attempt that basically does the same thing, but for all scenes. You can find it here:

2 Likes