View Full Version : Deep Nesting of VBox and HBox?

7 Feb 2011, 3:41 PM
I need to iterate over a JSON object that contains product items in a shopping cart and display them appropriately. The formatting will need to be somewhat "grid-like" in appearance. I like using nested vbox and hbox but I am finding that after one nestin, the items begin to draw underneath each other, so the necessary expansion for larger vbox items is not happening.

My question is, are there limitations with nesting vbox and hbox into several levels?

Here is my structure:

vbox: align stretch (outer 'row' level)
---hbox: align stretch
------column 1 (vbox: align stretch)
------column 2 (vbox: align stretch)

What's happening is column 1 may contain a lot of items that need to stack on top of each other, but they are not causing the outer vbox row to expand, but rather overflowing into the row below it. Part of the problem is that I had a height on the outer row, but if I remove it, everything collapses into one big mess. What's my problem here, should I not ne trying to nest vbox and hbox like this? What should I be using, all xtemplates?

(now need container to house a grid od items in column 1)

8 Feb 2011, 5:31 AM
Bottom line is that nested vbox and hbox layouts do not work well when it comes to needing dynamic heights in your rows. Better off using dataviews or pure xtemplates with divs or good ol' fashioned tables. The code to achieve a nested grid effect, even IF doable with nested box layouts, is much more succinct and easier to look at it with xtemplates. I also was unable to find any example out there that showed a nesting of box layouts more than 1 level (hbox in vbox, or vbox in hbox). Seems like the problem with nesting box layouts is that somewhere they are going to need a height specified, and once you do that, dynamic heights at the grid row level are no longer an option and larger content begins to flow underneath or over top of adjacent content.

If I'm wrong in this assessment, I'd love someone to show me different.

30 Mar 2011, 3:26 AM
If I'm wrong in this assessment, I'd love someone to show me different.

I fear that you are right. My attempts of nesting vbox/hbox only results in some of the layouts height not being set correctly. If I specify height manually (ie. 50px), the layout will display «normally». But this does not scale in any way. I will look into xtemplates.

30 Mar 2011, 4:49 AM
I have found the CSS3 properties for display: table; display: table-row; and display: table-cell; invaluable when combined with XTemplates. I would highly recommend using these.