You are currently viewing a snapshot of www.mozilla.org taken on April 21, 2008. Most of this content is highly out of date (some pages haven't been updated since the project began in 1998) and exists for historical purposes only. If there are any pages on this archive site that you think should be added back to www.mozilla.org, please file a bug.

Skip to main content

Splitter

Feature Owner
Eric Vaughan

The splitter widget is a widget that allows a user to add or remove space between 2 or more children within a box or a box ancestor.(Box ancestors: toolbar, toolbox, tabcontrol, tabbox, tabpanel, scrollbar)

(Splitters are heavily dependent on the behavior of boxes. If you have not read the box documentation, it is strongly recomended. Box system.)

Here are some examples:

This first example shows how a splitter can be used to change the width of titledbuttons. Notice that the splitter does not squeeze the titled buttons smaller that their min size. 

<box align="horizontal" flex="1">
   <box flex="1" style="border: 2px inset gray"/>
   <splitter/>
   <box flex="1" style="border: 2px inset gray"/>
</box>

View this example (1).

This example is the same at the first except it show splitters resizing the height of titled buttons. 

<box align="vertical" flex="1">
    <box flex="1" style="border: 2px inset gray"/>
    <splitter/>
    <box flex="1" style="border: 2px inset gray"/>
</box>

View this example (2).

Splitters are not limited to one per box. You and put as many as you wish. 

<box align="horizontal" flex="1">
    <box flex="1" style="border: 2px inset gray"/>
    <splitter/>
    <box flex="1" style="border: 2px inset gray"/>
    <splitter/>
    <box flex="1" style="border: 2px inset gray"/>
</box>

View this example (3).

Splitters can also contain custom content. 

<box align="vertical" flex="1">
    <box flex="1" style="border: 2px inset gray"/>
    <splitter>
      <titledbutton value="button1"/>
      <titledbutton value="button2"/>
      <spring flex="1"/>
      <titledbutton value="help"/>
    </splitter>
    <box flex="1" style="border: 2px inset gray"/>
</box>

View this example (4).

Splitters respond to several attributes

collapse:
*none
before
after

Splitters can have a collapser if requested. This is a small widget that when clicked causes the splitter to collapse the child before or after it. Example.

resizeafter:
*closest
farest
grow

This attribute only applies when there are more than one splitter in a box. When the splitter is dragged to the right or down, and resizeafter=closest the child in the box just to the right of the splitter will be resized. If the resizeafter=farest the very last child in the box will be resized. If the resizeafter=grow then the entire box will get larger. Example

resizebefore:
*closest
farest

This works exactly the same as resizeafter except in the other direction. If the value is closest and the splitter is resized then the child immediately to the left (or top) will resize. If the value is farest then the very first child in the box will get resized. Example

*default if no value is specified.

More examples: