resize

Resizeable CodePen Embeds

If you put an Embedded Pen into a resizeable container, it will fluidly resize to fill both the vertical and horizontal space. Nothing overly incredible, but I link it up here because I think the whole idea of offering user-resizeable things on the web is interesting. There is a resize property just for this.

Clearly browsers thought offering it by default on <textarea>s was a good idea. What else makes sense? Maybe inputs? Maybe text containers so users can pick a line length that they like? Maybe this is another form of theming?

Done Resizing Event

If you're used to something like jQuery UI resizeable, you get events you can bind to during the resizing, but also at the end of resizing.

No such event exists in native JavaScript.

You can fake it by setting a timeout to run the code you want to run when resizing stops. Then clear that timeout every time a resize event fires. That way the timeout will only finish if that timeout actually finishes.

var resizeTimer;

$(window).on('resize', function(e) {

  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {

    // Run code here, resizing has "stopped"
            
  }, 250);

});

Similar to debouncing.

resize

The resize property controls if and how an element can be resized by the user by clicking and dragging the bottom right corner of the element.

.module {
  resize: both;
}

Super important to know: resize does nothing unless the overflow property is set to something other than visible, which is its initial value for most elements.

It's also worth knowing that Firefox will let you resize an element smaller than its original size. Webkit browsers will not let you resize an element to make it smaller, only larger (in both dimensions).

Values

  • none: the element is not resizeable. This is the initial value for most elements. The textarea element is the most common exception—in many browsers its default resize value is both.
  • both: the user can resize the element's height and/or width.
  • horizontal: the user can resize the element horizontally (increasing the width).
  • vertical: the user can resize the element vertically (increasing the height).
  • inherit: the element inherits the resize value of its parent.

When an element is resizeable, it has a little UI handle on a lower corner. The handle appears on the right on page elements when the page's direction is set to ltr (left-to-right), and on the left on rtl (right-to-left) pages.

An element without the handle (front) and with the handle (back)

Demo

The resizeable element in this demo is a paragraph. Click the buttons to try out the different resize values.

See the Pen Resize Demo by CSS-Tricks (@css-tricks) on CodePen.

Related

More Information

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeOperaFirefoxIEEdgeSafari
4154*NoNo4

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
No37No565954
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag