View Full Version : Responsive (wrapping) HBox

4 Mar 2015, 10:26 AM

I am looking for a HBox that wraps its children onto another row when they overflow (on every resize).

I have used Column layout, but it doesn't work how I want since a) I want the children to stretch to the container width like hbox and b) the new row should be at a y position that isn't less than the maximum height of a child on the previous row (the children all have differing heights).

It's hard to believe that with all these layouts, responsive hbox wrapping is not supported!

4 Mar 2015, 11:29 PM
Bit heavy to use a Sencha java script layout to achieve your layout requirement.

Sounds like you have items with known widths that you want to wrap if they dont fit in a parent container/div of a known width.

This can be easily achieved without Javascript and hbox layout using containers, auto layout and CSS (inline block)

5 Mar 2015, 11:20 AM
You can get the portal demo and change it a little bit: http://http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/portal/portal.html

9 Mar 2015, 9:17 AM
Thanks suzuki1100nz. I used auto layout and CSS display: inline-block. I might need to stretch the components in the container to the available width (and no more than their max-width) - is there a way to do this? At the moment I'm having to set explicit widths for all children.