InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS properties

  • CSS3 flexbox
  • all
  • animation
  • background-color
  • background-image
  • border
  • border-color
  • border-radius
  • border-style
  • border-width
  • bottom
  • box-shadow
  • box-sizing
  • calc function
  • clip
  • color
  • color value currentColor
  • color values
  • cursor
  • float
  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • generated content
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline
  • outline-color
  • outline-style
  • outline-width
  • overflow
  • padding
  • pointer-events
  • position
  • resize
  • right
  • text-align
  • text-decoration
  • text-indent
  • text-overflow
  • text-shadow
  • text-transform
  • top
  • transform
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • visibility
  • white-space
  • word-break
  • word-spacing
  • word-wrap/overflow-wrap
  • z-index
 
  • Home
  • > Tutorials
  • > CSS
  • > CSS properties

CSS resize – make block element resizable by user

on Feb 23, 2016

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 done
try it online

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 done
try it online

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 done
try it online

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

Suggested posts:

  1. How to resize image (including animated gif) using Image magick convert
  2. CSS opacity – set opacity level of an element
  3. CSS3 cursors – change cursor on an element
  4. CSS animation-direction
  5. CSS transform – translateX and translateY
  6. Scale an element using css transform
  7. Rotate an element using css transform
  8. CSS flex-direction – flexbox container ordering and orientation
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged CSS, CSS properties, CSS3, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2023 InfoHeap.

Powered by WordPress