How to resize disable in textarea in CSS| draggable in html


This is an css short tutorial How to resize textarea in html and css

You will learn following things as part of this post

  • How to disable resize textarea with css/html
  • How to disable resize horizontally textarea
  • Disable Resize vertically for textarea

TextArea is a Input element and sizer. sizer allows support of multiline text and resizable in horizontal and vertical direction.

Text area can be created with rows and cols

<textarea id="description" name="description" rows="4" cols="50">
  </textarea>

By default text area is resizable by either clicking bottom right corner or dragging an mouse. textarea-resize.png

How to disable textarea resizable ?

There are multiple ways we can achieve with

  • Using resize attribute in CSS
  • max and min width height in CSS
  • html draggable attribute in HTML

resize attribute

Sometimes, You want fixed textarea which is not non resizable. How do you disable resize ? You can use resize:none attribute in css for textarea element resize is an attribute to make it resizable or not for an given html element. possible values for resize attribute are

none: disable resizable both: Can be resized horizontally and vertically horizontal: resized in horizontal direction and height is fixed vertical: resized in vertical direction only and width is fixed

textarea{
    resize:none;
}
  • using class attribute (.)

    if textarea is declared with class attribute, you can choose this option

.descriptionStyle{
    resize:none;
}

Where descriptionStyle is declared as an value for class attribute

<textarea id="description" name="description" class="descriptionStyle" rows="4" cols="50">
  • using id selector (#) textarea tag is declared with id attribute as follows

Here is an complete example

<!doctype html>
<html lang="en">
   <!DOCTYPE html>
   <html>
      <head>
         <script></script>
         <style>
            textarea{
            resize:none}
         </style>
      </head>
      <body>
         <h1>Text Area disable</h1>
         <textarea id="description" name="description" rows="4" cols="50">
  </textarea>
   </html>

Only disadvantages with this approach is It does support in all browsers except in Internet explorer.

All browsers support using max and min width

This is an css change to apply width and height to fixed pixel to following properties.

  • max-height
  • min-height
  • max-width
  • min-width
textarea{
    max-width: 200px;
    min-width:200px;
    min-height:200px;
    max-height: 200px;
}

Sizer on textarea is disabled.

It supports all latest and legacy browsers with all versions

draggable html attribute

HTML 5 provides draggable attribute in textarea tag.

draggable allows you to resize or not with boolean value, true is default value.

<textarea id="description" name="description" draggable="false" rows="4" cols="50">
  </textarea>

Sizer on textarea is removed in this case.

draggable is html 5 feature, hence, It supports only latest browsers chrome,safari,firefox etc..

How to resize disabled vertically textarea in css

as resize in css provides to make text resizable in horizontal direction and height of element is fixed. Vertical resize is disabled with this.

textarea {
  resize: horizontal;
}

Sizer on textarea allows only horizontal direction resizable.

How to resize disable horizontally textarea in css

In this, resize value is changed to vertical and width is fixed horizontal resize is disable.

textarea {
  resize: vertical;
}

Sizer on textarea allows only vertical direction resizable.

Conclusion

To Summarize, We have learned how to disable resize in text area in multiple ways

First, using resize attribute in CSS, has not have support in IE except all browsers. Second, using maximum and minimum width and height and has support for all browsers Finally, using draggable in html attribute which has support latest browsers only.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.