How to achieve flow layout in XUL?

Question

I'm creating a UI using XUL. I have N buttons I would like to add, and all I care about is that they all show on the form, regardless of the form's size. If I add a new button later or remove an existing button, I'd like to just delete the one <button> element rather than having to move things around inside grid or hbox/vbox elements.

Is there a way to get this behavior? It seems odd that I can't achieve this, given that it's the default behavior in HTML.

Answer 1

HTML and XUL do handle this differently on a fundamental level. XUL is box-based. You can see the difference discussed on MDC here. It's not entirely clear (to me) from the documentation, but nsBoxToBlockAdaptor might be a step in the direction you seek.

Answer 2

Try this:

 <description><button/><button/><button/><button/><button/>
              <button/><button/><button/><button/></description>

XUL <description> on MDC

PS. you probably want to rethink your UI if you have a large and non-constant number of buttons in a row :)

Answer 3

You need add display: block; to the style of the parent element.

See http://starkravingfinkle.org/blog/2008/06/xul-tip-wrapping-boxes/ for details