Reactive sizing when using "true"

[Neobii]

{{#Modifier size="[undefined, 500]" origin="[0, .5]" align="[0, .5]"}}
    {{#SequentialLayout}}
        {{#famousEach navLinks}}
            {{>Surface template="mainNav" size="[undefined, 100]"}}
        {{/famousEach}}
    {{/SequentialLayout}}
{{/Modifier}}

This will center it correctly if there are 5 elements, however if I put true instead of 500, it is not centered even though I height of the surface inside.

[gam-ragnar]

True means collapse to size of content. You need to set the width within which the items should be displayed

[gadicc]

Yeah, it's a bit confusing. My answer from #223 might help:

Ok so what's going on is that you haven't given the StateModifier any size. It's not like HTML where it will expand to fit it's contents. You can imagine it's children have a "position: absolute" and are taken out of the flow (well, not imagine... that really is what's happening). So it's size in this case is actually [0,0]. So it's aligning to middle, but it's origin is essentially the top left corner because it has size 0. The easy fix is just to give it a size.

In general, only Surface's are the only thing guaranteed to support true sizes. I'm not aware of any modifiers that do. Some views do, e.g. the famous-flex stuff (you can see it in action on the plugins, a Scrollview containing a true-sized FlexLayoutController, so the entire page scrolls with the full list, and not just the list leaving the rest of the page still).