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.

dir, element, type


Resizing a window

<window xmlns=""
	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 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 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;"/>

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"/>


Type: one of the values below
The direction that the window is resized.
Resized to the left.
Resized to the right.
Resized up.
Resized down.
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). 
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). 
Resized down and to the left.
Resized down and to the right.
Resized up and to the left.
Resized up and to the right.


Type: element to resize
The id of the element that should be resized by the resizer.
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


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


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


Document Tags and Contributors

 Contributors to this page: Sheppy, Steffen, kscarfone, trevorh, Domax, Marsf, Mgjbot, Ptak82, Dria
 Last updated by: Sheppy,