--- title: splitter slug: Mozilla/Tech/XUL/splitter translation_of: Archive/Mozilla/XUL/splitter ---

<?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/gat...re.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>