Wrapping objects


Is there a mechanism for wrapping boxes? If I have a parent that happens to be 1200px wide and I have two siblings that are 600px min each. If I reduce the parent to 1000 I'd expect the elements to stack, at which point a "max" setting of 100% would kick in. Is there some way to achieve this already?

2017.01.02 Status update

I could be wrong but I don't think there is as something similar came up on a previous post about responsive elements and mimicking break points/media queries.

I think the workaround for now was creating a component with multiple states so for you it would be one with horizontal alignment and a second with vertical alignment within the parent.



There is no wrapping mechanism at the moment.
We are considering wrapping as part of the layout engine overhaul, though.

@toby_burkill's advice to use component states is what we're leaning towards for a more complex scenario like what you describe (children with min sizes and a separate "preferred" size when they have space).
This would let you design whatever wrapping behavior you want (assuming you can get your developers onboard), rather than constrain you to a specific wrapping model.

Of course, it could be that a "simple" wrapping model may be enough for 90% of the use cases.
We're looking at something like CSS flexbox for wrapping.


I think the states could work but it would need to have an ability for a component to be more like a true container, unaware of it's children. If I have a parent, add several children, add a new state to the parent and then add more children, those children become dependent on the parent state. If I wanted to use states like breakpoints, the ideal behavior would be something like a toggle "add children to state" or something to that effect. That way the cross-axis switch could be modified at will.


Kevin, I definitely applaud you guys for not just saying "we'll have full flexbox support".

Layout and break points are hard problems and at the end of the day subform is a design tool, not an application rendering engine, and you are right to carefully consider every new button and control that is added to subform and that can clutter the UI.

(Part of me wonders if the best solution would be to have some kind of "plug in" support that allows anybody to develop low level layout rules and import them into subform... this allows you to handle the 80% case natively and allow the other 20% import a plugin for more complex, if confusing, layout scenarios)