CSS resize – make block element resizable by user

CSS (CSS3) property resize can be used to make a div (or other block level element) resizable by clicking and dragging bottom right corner of the element. Few points to note about resize:

  1. The overflow property must be anything other that visible. e.g. It can be hidden, scroll or auto.
  2. It is not supported by IE.
  3. In chrome, safari, opera user can only make an element bigger than its original size in both direction. Firefox lets use resize the element to smaller that its original size.

CSS property resize

CSS version: CSS 3
Value: none | both | horizontal | vertical
Initial: none
Applies to: elements with overflow other than visible
Inherited: no

CSS3 resize div example – both direction

<style type="text/css">
.container {
  width: 200px;
  height:80px;
  background-color:lightgreen;
  overflow: scroll;
  resize: both;
}
</style>

<div class="container">
This is some text and its container div can be resized.
</div>
refresh

CSS3 resize div example – horizontal direction

<style type="text/css">
.container {
  width: 200px;
  height:80px;
  background-color:lightgreen;
  overflow: scroll;
  resize: horizontal;
}
</style>

<div class="container">
This is some text and its container div can be resized horizontally.
</div>
refresh

CSS3 resize div example – vertical direction

<style type="text/css">
.container {
  width: 200px;
  height:80px;
  background-color:lightgreen;
  overflow: scroll;
  resize: vertical;
}
</style>

<div class="container">
This is some text and its container div can be resized vertically.
</div>
refresh

Specification and Browser compatibility

SpecificationStatusCategories
CSS resize propertyW3C Candidate RecommendationCSS3
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 4+ Yes 5+ NoNoYes 4+ Yes 15+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ NoNoYes 33+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments