« XUL Reference home [ Examples | Attributes | Properties | Methods | Related ]

An element used for window resizing. If you place a custom resizing button inside the resizer, the user will be able to resize the window by dragging it. The resizer will send a command event after the resize is complete.

Note: Starting in Gecko 2.0, you can also specify a target element using the element attribute, to use the resizer to resize the specified element instead of the window.

Attributes
dir, element, type

Examples

Resizing a window

<window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"
	hidechrome="true"
	windowtype="main"
	orient="vertical"
	sizemode="normal"
	width="400" height="300"
	persist="screenX screenY width height">
	<hbox flex="1">
		<vbox width="2" style="background-color: grey;">
			<resizer dir="topleft" height="2" style="cursor: nw-resize;"/>
			<resizer dir="left" flex="1" style="cursor: w-resize;"/>
			<resizer dir="bottomleft" height="2" style="cursor: sw-resize;"/>
		</vbox>
		<vbox flex="1">
			<resizer dir="top" height="2" style="background-color: grey; cursor: n-resize;"/>
			<browser flex="1" id="browser" type="content-primary"/>
			<resizer dir="bottom" height="2" style="background-color: grey; cursor: s-resize;"/>
		</vbox>
		<vbox width="2" style="background-color: grey; overflow: hidden;">
			<resizer dir="topright" height="2" style="cursor: ne-resize;"/>
			<resizer dir="right" flex="1" style="cursor: e-resize;"/>
			<resizer dir="bottomright" height="2" style="cursor: se-resize;"/>
		</vbox>
	</hbox>
</window>

Resizing an element

<stack style="border: 1px solid black;">
  <button id="button" label="Resizable" left="18" top="18" right="18" bottom="18"/>
  <resizer dir="topleft" style="background: black; -moz-appearance: none;"
           element="button" left="0" top="0" width="16" height="16"/>
  <resizer dir="topright" style="background: black; -moz-appearance: none;"
           element="button" right="0" top="0" width="16" height="16"/>
  <resizer dir="bottomleft" style="background: black; -moz-appearance: none;"
           element="button" left="0" bottom="0" width="16" height="16"/>
  <resizer dir="bottomright" style="background: black; -moz-appearance: none;"
           element="button" right="0" bottom="0" width="16" height="16"/>
</stack>

Attributes

dir
Type: one of the values below
The direction that the window is resized.
left
Resized to the left.
right
Resized to the right.
top
Resized up.
bottom
Resized down.
bottomstart
Resized down and toward the start of the line (toward the left for left-to-right locales, toward the right for right-to-left locales). 
bottomend
Resized down and toward the end of the line (toward the right for left-to-right locales, toward the left for right-to-left locales). 
bottomleft
Resized down and to the left.
bottomright
Resized down and to the right.
topleft
Resized up and to the left.
topright
Resized up and to the right.

 

element
Type: element to resize
The id of the element that should be resized by the resizer.
type
Type: string
Set this to the value "window" for a resizing grip that appears in the bottom corner of the window, used for resizing the window. As some platforms provide this resizing grip automatically, this type of resizer element will be hidden and ensure that the window does not get an extra resizer.

Inherited from XUL element
align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortDirection, sortResource, sortResource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width

Properties

Inherited Properties
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, 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