mozilla
Your Search Results

    resizer

    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, 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

    TBD

    Document Tags and Contributors

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