In HTML you can use a DIV as a container and when the DIV changes size, the contents will wrap or adjust the layout. This does not happen with XUL BOX (or HBOX and VBOX) by default. However, you can easily add this capability with a style change. Make the BOX style="display: block" and the wrapping behavior will occur when the box is resized:
If you put IMAGE in the contents, you should probably add align="start" attribute to the box. This keeps the image from stretching inside the box.
This question keeps popping up on IRC, so I added a code snippet to MDC. Hopefully, it will reduce the number of times Mook, Mossop and Neil have to answer the question. (At least they have something to point to now)
Alternatively you could just make that the default style! Sounds like it’s causing a lot of annoyance, why isn’t it the default?
Thanks a lot. You can’t imagine how much time I wated with this topic by counting toolbarbuttons within a line with javascript and add new toolbars into the DOM etc.
Thanks again
Pete
same thing here with toolbars, we’ve long had our own toolbar xbl widgets to handle under/overflow and make things wrap. This style let me get rid of a bunch of hacky code and a couple widgets 🙂
This is great. This style has solved a problem I was wrestling with – how to layout an unknown number of buttons in scrolling box of indeterminate size.
The buttons are now laid out left to right then top to bottom with vertical scrolling when overflow occurs and when the box is resized everything re-flows nicely.
Brilliant! Except my client wants it oriented horizontally with the buttons going top to bottom then left to right with horizontal scrolling. Can’t get it to work. Apparently the style forces horizontal orientation.
Any suggestions? Have tried experimenting with CSS3 columns but they don’t seem to work in XUL.
@Roger – yes, it appears the the “display: block” will force even a VBOX to layout horizontally. Sorry.