oursolutionarchitectoursolutionarchitect
  • Selected Reading
  • Q&A

CSS - Resize Elements

CSS resize is a property that allows users to adjust the size of an element, either vertically, horizontally, both, or none, based on the specified value.

Resize property adds a handle at the bottom-right corner of an element on a webpage. This handle allows users to click and drag to change the size of an elements, making it larger or smaller according to their preference.

The CSS resize Property

This chapter will cover the use of CSS resize property which can take one of the following values −

  • none − No user-controllable method for resizing an element is possible. This is default value.

  • vertical − User can resize an element in the vertical direction.

  • horizontal − User can resize an element in the horizontal direction.

  • both − User can resize an element both horizontally and vertically.

  • block − User can resize an element in the block direction (either horizontally or vertically, depending on the writing-mode and direction value).

  • inline − User can resize an element in the inline direction (either horizontally or vertically, depending on the writing-mode and direction value).

The block and inline properties are supported only in Firefox and Safari browsers.

CSS Resize - Demo

Try to select different values for CSS resize property and then resize the box to see the effect.

CSS to Disable Resizability of Textareas

Following example demonstrates use of CSS resize property set to none value. Here we see user is prevented from resizing the element in any direction. The resize: none is a default value.

<html>
<head>
<style>
   textarea {
      resize: none;
      background-color: #e7ef0e; 
      overflow: auto; 
      height: 100px; 
      width: 600px;
   }
</style>
</head>
<body>
   <textarea>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</textarea>
</body>
</html>

CSS Resize Elements Vertically

Following example demonstrates use of CSS resize property set to vertical. Here we see user is allowed to resize the height of the <div> element vertically by dragging the bottom-right corner.

<html>
<head>
<style>
   div {
      resize: vertical;
      background-color: #e7ef0e; 
      overflow: auto; 
      height: 100px; 
      width: 600px;
   }
</style>
</head>
<body>
   <h3>Click and drag the bottom-right corner to change the size of an element vertically.</h3>
   <div>
   <h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
   <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
   </div>
</body>
</html>

CSS Resize Elements Horizontally

Following example demonstrates use of CSS resize property set to horizontal. Here we see user is allowed to modify the width of a <div> element horizontally by dragging the bottom-right corner.

<html>
<head>
<style>
   div {
      resize: horizontal;
      background-color: #e7ef0e;
      overflow: auto;
      height: 150px;
      width: 550px;
   }
</style>
</head>
<body>
   <h3>Click and drag the bottom-right corner to change the size of an element horizontally.</h3>
   <div>
      <h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
      <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
   </div>
</body>
</html>

CSS Resize Elements Horizontally & Vertically

Following example demonstrates use of CSS resize property set to both. Here we see user is allowed to resize the element both horizontally and vertically.

<html>
<head>
<style>
   div {
      resize: both;
      background-color: #e7ef0e;
      overflow: auto;
      height: 150px;
      width: 550px;
   }
</style>
</head>
<body>
   <h3>Click and drag the bottom-right corner to change the size of an element vertically and horizontally.</h3>
   <div>
      <h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
      <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
   </div>
</body>
<html>

CSS Resize Elements Inherits Resizability

Following example demonstrates use of CSS resize property set to inherit on a child element. Here we see it will have the same resizing behavior as its parent element.

<html>
<head>
<style>
   .box1 {
      resize: horizontal;
      background-color: #e7ef0e;
      overflow: auto;
      height: 250px;
      width: 550px;
   }
   .box2 {
      resize: inherit;
      background-color: #eee;
      height: 150px;
      width: 250px;
      overflow: scroll;
   }
</style>
</head>
<body>
   <h3>Click and drag the bottom-right corner to change the size of an element.</h3>
   <div class="box1">
      <p>This is parent box which can be resized horizontally.</p>
      <div class="box2">
         <h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
         <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
      </div>
   </div>
</body>
</html>

CSS Resize Arbitrary Elements

It is possible to create a resizable <div> container with a resizable <p> (paragraph) element inside it, where user can click and drag the bottom-right corner to change the size of both the container and the paragraph. Following example demonstartes this behavior.

<html>
<head>
<style>
   .box {
      resize: both;
      background-color: #e7ef0e;
      overflow: scroll;
      border: 2px solid black;
   }
   div {
      height: 250px;
      width: 550px;
   }
   p {
      height: 150px;
      width: 250px;
   }
</style>
</head>
<body>
   <h3>Click and drag the bottom-right corner to change the size of an element.</h3>
   <div class="box">
      <h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
      <p class="box"> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you ar going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
   </div>
</body>
</html>