<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>

<window title="XUL Splitters"
        xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<script>
<![CDATA[

]]>
</script>

<description><html:h1>XUL Splitters</html:h1></description>

 <vbox flex="1" style="overflow: auto">

    <groupbox orient="horizontal" flex="1">
    <caption label="collapse before" />
      <groupbox flex="1"><label flex="1" value="Left side" /></groupbox>
      <splitter collapse="before" ><grippy /></splitter>
      <groupbox flex="1"><label flex="1" value="Right side" /></groupbox>
    </groupbox>

    <groupbox orient="horizontal" flex="1">
    <caption label="collapse after" />
      <groupbox flex="1"><label flex="1" value="Left side" /></groupbox>
      <splitter collapse="after" ><grippy /></splitter>
      <groupbox flex="1"><label flex="1" value="Right side" /></groupbox>
    </groupbox>

    <groupbox orient="horizontal" flex="1">
    <caption label="no collapse" />
      <groupbox flex="1"><label flex="1" value="Left side" /></groupbox>
      <splitter collapse="none" />
      <groupbox flex="1"><label flex="1" value="Right side" /></groupbox>
   </groupbox>

  <groupbox  orient="horizontal" flex="1">
  <caption label="resize the closest widgets on both sides" />
    <groupbox flex="1"><description>Left most side</description></groupbox>
    <groupbox flex="1"><description>Middle Left side</description></groupbox>
    <groupbox flex="1"><description>Closest Left side</description></groupbox>
    <splitter collapse="none" resizebefore="closest" resizeafter="closest" />
    <groupbox flex="1"><description>Closest Right side</description></groupbox>
    <groupbox flex="1"><description>Middle Right side</description></groupbox>
    <groupbox flex="1"><description>Right most side</description></groupbox>
  </groupbox>

  <groupbox  orient="horizontal" flex="1">
  <caption label="resize the farthest widgets on both sides" />
    <groupbox flex="1"><description>Left most side</description></groupbox>
    <groupbox flex="1"><description>Middle Left side</description></groupbox>
    <groupbox flex="1"><description>Closest Left side</description></groupbox>
    <splitter collapse="none" resizebefore="farthest" resizeafter="farthest" />
    <groupbox flex="1"><description>Closest Right side</description></groupbox>
    <groupbox flex="1"><description>Middle Right side</description></groupbox>
    <groupbox flex="1"><description>Right most side</description></groupbox>
  </groupbox>


  <groupbox orient="horizontal" flex="1">
  <caption label="grow the widgets on the right side" />
    <groupbox flex="1"><description>Left side</description></groupbox>
    <splitter collapse="none" resizebefore="grow" resizeafter="grow" />
    <groupbox flex="1"><description>Closest Right side</description></groupbox>
    <groupbox flex="1"><description>Middle Right side</description></groupbox>
    <groupbox flex="1"><description>Right most side</description></groupbox>
  </groupbox>

  <groupbox orient="horizontal" flex="1">
  <caption label="double splitters" />
      <groupbox flex="1"><label flex="1" value="Left side" /></groupbox>
      <splitter collapse="before" ><grippy /></splitter>
      <groupbox flex="1"><label flex="1" value="Middle" /></groupbox>
      <splitter collapse="after" ><grippy /></splitter>
      <groupbox flex="1"><label flex="1" value="Right side" /></groupbox>
  </groupbox>

</vbox>

</window>
