Boxes

Wrapping contents

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:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow" xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<hbox style="display: block">
  <label value="AAA"/>
  <label value="BBB"/>
  <label value="CCC"/>
  <label value="DDD"/>
  <label value="EEE"/>
  <label value="FFF"/>
  <label value="GGG"/>
  <label value="HHH"/>
  <label value="III"/>
  <label value="JJJ"/>
  <label value="KKK"/>
  <label value="LLL"/>
  <label value="MMM"/>
  <label value="NNN"/>
  <label value="OOO"/>
  <label value="PPP"/>
  <label value="QQQ"/>
  <label value="RRR"/>
  <label value="SSS"/>
  <label value="TTT"/>
  <label value="UUU"/>
  <label value="VVV"/>
  <label value="WWW"/>
  <label value="XXX"/>
  <label value="YYY"/>
  <label value="ZZZ"/>
</hbox>

</window>

Images

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:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

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

</window>