XUL Tip – Wrapping Boxes

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:


<box align="start" style="display:block">
  <image src="chrome://global/skin/icons/Error.png" style="padding:5px"/>
  <textbox />
  <image src="chrome://global/skin/icons/Error.png" style="padding:5px"/>
  <button label="Hello"/>
  <image src="chrome://global/skin/icons/Error.png" style="padding:5px"/>
</box>

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)

5 Comments

  1. pd said,

    June 23, 2008 @ 3:07 am

    Alternatively you could just make that the default style! Sounds like it’s causing a lot of annoyance, why isn’t it the default?

  2. Pete said,

    June 23, 2008 @ 10:08 am

    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

  3. Shane Caraveo said,

    June 23, 2008 @ 2:28 pm

    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 :)

  4. Roger Bailey said,

    July 9, 2008 @ 12:37 pm

    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.

  5. Mark Finkle said,

    July 9, 2008 @ 1:04 pm

    @Roger – yes, it appears the the “display: block” will force even a VBOX to layout horizontally. Sorry.

RSS feed for comments on this post