How do you control when layout padding yields/compresses?

Layouts are frustrating, blah, blah, blah. Okay, that's out of my system.

I've been building out a World Space UI based on a prepared wireframe for VR. I started out setting up layout relations from the largest elements downwards. This generally works, and I've picked up a few tricks for proportional scaling, exclusive scaling (header/foot remain the same, body expands), and various other patterns as needed.

I test the UI by scaling the entire canvas down to zero in width and height to see if elements resize in a stable way for animation purposes (collapse/expand) and so I can make adjustments to the overall scale as needed.

What I can't wrap my head around, however, is how to carry some of those relations down all the way to the smallest items because certain scaling instructions on child objects will break or ignore the rules of the parent in ways I don't understand. Layout padding is the latest mystery barrier I'm working to understand.

In particular, I've noticed that if I add padding to a layout, that padding becomes incompressible and I don't know of any place where I can change that. If I want a 3x3 grid of cubes separated by 5 pixels with 5 pixel buffers, the container object won't scale below 20x20 due to the padding. That padding seems to receive the highest priority for scaling, forcing all other elements to being yielding, and when that's done, it will be shoved out of the canvas rather than scaling itself.

How do I control the scaling of layout padding? Which rules govern the padding?

In the attached example, I'm using a header/footer pair with Flexible Height set to 0, and a desired height as Preferred. This creates a maximum value which is typically respected. The "Body" object is set to have a Flexible Height of 1 and a target of 0. Its contents are correctly scaling down to nothing, but the layout itself resists, leaving exactly 25px in height representing the top, bottom, and three spacers.

If I remove all of the vertically stacked items from Body, the top/bottom padding still resists scaling.

I could add a frame to every object containing the padding in the form of anchors, but that's too explicit and defeats the purpose of layout padding.

9384770--1312718--layoutPadding_01.PNG 9384770--1312721--layoutPadding_02.PNG 9384770--1312724--layoutPadding_03.PNG

As far as I can tell, the solution for my current case is, for some reason I don’t understand, to add a redundant child container that expands to fill the exact same area, then copy the layout to the child. I don’t know if objects in a layout stop sending anchor-based limitations in the same way or something.

This setup makes layout padding immune.:

  • Canvas + Layout

  • Header

  • Body + Layout

  • Child

  • Footer

But this setup makes layout padding yield to the expanding anchor:

  • Canvas + Layout

  • Header

  • Body

  • Expanding Container + Layout

  • Child

  • Footer

Maybe something to do with having a layout directly childed to another layout?