Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
« XUL Reference home [ Examples | Attributes | Properties | Methods | Related ]

An element which should appear before or after an element inside a container. When the splitter is dragged, the sibling elements of the splitter are resized. If a grippy is placed inside the splitter, one sibling element of the splitter is collapsed when the grippy is clicked.

More information is available in the XUL tutorial.

Attributes
collapse, resizeafter, resizebefore, state, substate
Style classes
tree-splitter

Examples

splitter_arrow.png

<!-- This bar has some styling associated with it. The vbox is
     used to hold the .png image that a user clicks on to resize the search bar.-->

<splitter tooltiptext="Resize the Search Box" oncommand="alert('The splitter was dragged')">
  <vbox id="example_vbox" />
</splitter>

Attributes

collapse
Type: one of the values below
Determines which side of the splitter is collapsed when its grippy is clicked. If this attribute is not specified, the splitter will not cause a collapse. You should put a grippy element inside the splitter when it is used for collapsing.
none
No collapsing occurs.
before
When the grippy is clicked, the element immediately before the splitter in the same parent is collapsed so that its width or height is 0.
after
When the grippy is clicked, the element immediately after the splitter in the same parent is collapsed so that its width or height is 0.
both
Either the element immediately before the splitter, or the element immediately after the splitter can be collapsed, if the size of that element would fall below the minimum size due to the position of the splitter.
resizeafter
Type: one of the values below
This attribute indicates which element to the right or below the splitter should be resized when the splitter is repositioned.
closest
The element immediately to the right or below the splitter resizes.
farthest
The element that is the farthest away from the splitter to the right or below the splitter resizes.
grow
The elements to the right or below the splitter do not change size (unless they are flexible) when the splitter is dragged, but instead the entire container changes size.
flex
The closest flexible element resizes.
resizebefore
Type: one of the values below
This attribute indicates which element to the left or above the splitter should be resized when the splitter is repositioned.
closest
The element immediately to the left or above the splitter resizes.
farthest
The element that is the farthest away from the splitter to the left or above the splitter resizes.
flex
The closest flexible element resizes.
state
Type: one of the values below
Indicates whether the splitter has collapsed content or not. This attribute will be updated automatically as the splitter is moved, and is generally used in a stylesheet to apply a different appearance for each state.
open
The content either before or after the splitter, depending on the value of the collapsed attribute, is currently displayed.
collapsed
The content either before or after the splitter is collapsed and is not visible.
dragging
The user is current adjusting the position of the splitter, typically by dragging it with the mouse.
substate
Type: one of the values below
On splitters which have state="collapsed" and collapse="both", determines which direction the splitter is actually collapsed in. Since collapse="both" is a Gecko 1.9+ feature, this will have no effect on earlier versions.
before
The element immediately before the splitter is collapsed.
after
The element immediately after the splitter is collapsed.

Properties

Inherited Properties
align, attributes, allowEvents, baseURI, boxObject, builder, childElementCount, childNodes, children, className, clientHeight, clientLeft, clientTop, clientWidth, collapsed, contextMenu, controllers, database, datasources, dir, firstChild, firstElementChild, flex, height, hidden, id, lastChild, lastElementChild, left, localName, maxHeight, maxWidth, menu, minHeight, minWidth, namespaceURI, nextElementSibling, nextSibling, nodeName, nodeType, nodeValue, observes, ordinal, orient, ownerDocument, pack, parentNode, persist, prefix, previousElementSibling, previousSibling, ref, resource, scrollHeight, scrollLeft, scrollTop, scrollWidth, statusText, style, tagName,textContent, tooltip, tooltipText, top, width

Methods

Inherited Methods
addEventListener(), appendChild(), blur, click, cloneNode(), compareDocumentPosition, dispatchEvent(), doCommand, focus, getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getBoundingClientRect(), getClientRects(), getElementsByAttribute, getElementsByAttributeNS, getElementsByClassName(), getElementsByTagName(), getElementsByTagNameNS(), getFeature, getUserData, hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isDefaultNamespace(), isEqualNode, isSameNode, isSupported(), lookupNamespaceURI, lookupPrefix, normalize(), querySelector(), querySelectorAll(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS(), setUserData

Style classes

The following classes may be used to style the element. These classes should be used instead of changing the style of the element directly since they will fit more naturally with the user's selected theme.

tree-splitter
This splitter is intended to be used in tree columns (in-between treecol elements). The splitter will be drawn with no width so that it isn't visible, however, the columns may still be resized. 

<tree id="tree1" flex="1" height="300" enableColumnDrag="true">
  <treecols>
    <treecol id="name" label="Name" flex="1"/>
    <splitter class="tree-splitter"/>
    <treecol id="id" label="ID" flex="1"/>
    <splitter class="tree-splitter"/>
    <treecol id="date" label="Date" flex="1"/>
    <splitter class="tree-splitter"/>
  </treecols>
  <treechildren/>
</tree>

Splitter resizing and overflow

The degree to which a splitter will resize a box, and what happens during the resize and after the limit is reached, depends on the height (or width) specified for the box as an attribute or in CSS, the min-height (or min-width), the intrinsic height of the box contents, and the presence or absence of a collapse attribute on the splitter.

For:

<vbox></vbox>
<splitter/>
<vbox></vbox>

...the splitter will not move, unless there is a collapse attribute on the splitter, which will cause it to collapse as soon as it is dragged.

For:

<vbox/>
<splitter/>
<vbox height="500">
  <vbox height="100"/>
</vbox>

...the splitter can be dragged down to the 100px intrinsic height of the lower box, where it will stop (or collapse if the splitter has a collapse attribute).

For:

<vbox/>
<splitter/>
<vbox height="500" minheight="200">
  <vbox height="100"/>
</vbox>

...the splitter can be dragged down to the 200px minheight, where it will stop or collapse.

For:

<vbox/>
<splitter/>
<vbox height="500" style="min-height: 50">
  <vbox height="100"/>
</vbox>

...the splitter can be dragged down below the 100px intrinsic height of the lower box, causing the child box to overflow, until reaching the min-height, at which point it will stop or collapse. That should also work with a minheight attribute specifying a value less than the intrinsic height. (However, because of bug 513597, only specifying both minheight and minwidth attributes, or specifying min-height or min-width in CSS, actually works to allow overflow.)

TBD

Document Tags and Contributors

Tags: 
 Contributors to this page: Sheppy, pippijn, fscholz, jenzed, XFallenAngel, diyoji, Mrolappe, Soupdragon, Mgjbot, Ptak82, Dria, A1kmm
 Last updated by: Sheppy,