Frontfire documentation

Resizable plugin

Version 2.1.0

Frontfire UI allows resizing any element by draggable handles at each side.

This plugin is available in the Minimal and Complete bundles.

This plugin depends on the plugins: draggable

Description

Resizable elements allow the user to change the width or height of an element. Call the resizable() plugin method on any element to add the resizable feature. The element size can be constrained by providing options to that method or handling events. This feature provides a low-level behaviour to elements that usually is not used on its own but rather by other Frontfire UI features to build upon it.

The examples on this page use additional CSS styles that are not shown in the source boxes. Read the source code of this page or use the browser’s DOM inspector to see these styles.

The box handle colours can be customised with the CSS variables that start with “--resizable-”.

Basic examples

Here are examples that demonstrate the basic usage of the resizable feature. These static-positioned elements will be changed to relative position to maintain their new position but still take their space in the layout flow. You can also start with absolute-positioned elements which won’t be changed then. Touch actions to scroll the page are disabled in the direction the elements may be dragged.

Resize me anywhere (if checked)
Resize me horizontally
Resize me vertically
Resize me at left edge
Resize with box handles

Minimum and maximum size

The minimum and maximum size can be restricted while resizing the element.

Minimum size
Maximum size

Resizable within a container

The dimensions of a resizable element can be restricted to another element or the parent element with the containment option.

Resize me within the container
Resize me within the container

Snapping to grid within the container

Resize me with grid snapping
Resize me horizontally with grid

Resize event handler

This example shows how the resizable events can be used to react to resizing events or restrict the operations. The events and their data properties are described below.

Resize with callback

Options

The following options are available:

Name Type Description Default
containment Node(s), String Constrains the resizing inside the specified element, specified as Node (collection) or CSS selector, or the “parent” of the resized element or the “viewport”. None
grid Number array The grid to snap the resized element to during resizing, as [x, y] in pixels. The grid is aligned at the top left corner of the parent element. None
handles String The resizing handles to use, comma-separated. Can be “all” or a combination of “n, ne, e, se, s, sw, w, nw” for the cardinal directions. All directions
handleClass String Additional CSS class for the handle elements. Known class: “box”. None
handleWidth Number The width of the default handles, in pixels. 10
maxHeight Number The maximum height to keep during resizing, in pixels. None
maxWidth Number The maximum width to keep during resizing, in pixels. None
minHeight Number The minimum height to keep during resizing, in pixels. None
minWidth Number The minimum width to keep during resizing, in pixels. None
scroll Boolean Indicates whether the window should scroll to keep the resized edge visible. false

Plugin methods

This plugin provides methods to control the resizable.

deinit

Deinitializes the plugin and removes the resizing features from the elements.

Plugin events

This plugin triggers events for the resizable elements.

resizableend

Triggered when the resize operation has ended. The following properties are provided with the event:

resizing

Triggered when the element is being resized. This event can be cancelled by calling event.preventDefault() to prevent the current size change, but if the element has already been resized, it is usually better to set the event’s newPosition and newLength properties to a desired value. The following properties are provided with the event:

resizablestart

Triggered when the element is starting to be resized. This event can be cancelled by calling event.preventDefault() to prevent the resizing. The following properties are provided with the event: