Disable the resizing of TextArea in multiple browsers
- We often find our TextArea resizable on multiple browsers.
- Click on the right bottom of TextArea and you can resize it.
- This resizing of TextArea disrupts the page layout and affects the way page looks.
- In this article we will see two ways to disable the resizing of TextArea.
Below demo shows what we meant with resizing of TextArea.
Click on the right corner of the above textarea and drag it. The dragging changes the size of textarea.
Lets see 2 ways by which we can control the resizing of the textarea.
Way 1 :
We have a property introduced in CSS3. The property is re-size This property set to none, disables the re-sizing of textarea.
Demo :
In the above example, we have set re-size to none for above textarea. As you can see, we are not getting the right corner image as well. You will not be able to drag or re-size the above textarea.
Way 2 :
The second way to disable the resizing the textarea is also comes from CSS3 properties. We have properties like min-height, max-height, min-width and max-width which can be used to disable re-sizing of textarea.
Setting the min-width and max-width property to same value, will disable the re-sizing horizontally. Similarly setting the min-height and max-height property to same value will disable the re-sizing vertically.
Demo :
In the above example, we have used four properties to disable the resizing. Using this way, the right corner image appears but you will not be able to resize the textarea.
Thus these are the two ways to disable the re-sizing of TextArea.
0 comments:
Post a Comment