mozilla
Your Search Results

    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="http://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="http://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>
    

    Document Tags and Contributors

    Tags: 
    Contributors to this page: wbamberg, MarkFinkle, Kray2, mehmetaergun
    Last updated by: mehmetaergun,
    Hide Sidebar