PROBLEM
How to disable the resizable property of a textarea?
We can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse.
SOLUTION 1:
To disable textareas, we can tried the following.
[pastacode lang=”css” manual=”To%20disable%20a%20specific%20textarea%20with%20the%20name%20attribute%20set%20to%20wiki%20(i.e.%2C%20%3Ctextarea%20name%3D%E2%80%9Cwiki%22%3E%3C%2Ftextarea%3E)%0Atextarea%5Bname%3Dwiki%5D%20%0A%7B%0A%20%20%20%20resize%3A%20none%3B%0A%7D%0A%0AUsing%20an%20id%20attribute%20(i.e.%2C%20%3Ctextarea%20id%3D%E2%80%9Cwiki%22%3E%3C%2Ftextarea%3E)%3A%0A%23wiki%20%0A%7B%0A%20%20%20%20resize%3A%20none%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]
SOLUTION 2:
The following CSS rule disables resizing behavior for textarea elements:
[pastacode lang=”css” manual=”Textarea%0A%7B%0A%20%20%20%20resize%3A%20none%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]
[ad type=”banner”]
SOLUTION 3:
[pastacode lang=”markup” manual=”%3Ctextarea%20style%3D%22resize%3Anone%22%20rows%3D%2210%22%20placeholder%3D%22Enter%20Text%22%20%3E%0A%3C%2Ftextarea%3E%0A” message=”html code” highlight=”” provider=”manual”/]
SOLUTION 4:
This is one of the best solution :
[pastacode lang=”css” manual=”textarea%20%0A%7B%0A%20%20%20%20max-width%3A%2F*desired%20fixed%20width*%2F%20px%3B%0A%20%20%20%20min-width%3A%2F*desired%20fixed%20width*%2F%20px%3B%0A%20%20%20%20min-height%3A%2F*desired%20fixed%20height*%2F%20px%3B%0A%20%20%20%20max-height%3A%2F*desired%20fixed%20height*%2F%20px%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]
SOLUTION 5:
[pastacode lang=”markup” manual=”%3Ctextarea%20name%3D%22textinput%22%20%20%20%20draggable%3D%22false%22%3E%3C%2Ftextarea%3E%0A%0ADefault%20value%20is%C2%A0true%C2%A0for%20draggable%20attribute.%20%0A” message=”html code” highlight=”” provider=”manual”/]
[ad type=”banner”]
SOLUTION 6:
[pastacode lang=”css” manual=”resize%3A%20none%3B%0A” message=”” highlight=”” provider=”manual”/]
you can use CSS inline style property :
[pastacode lang=”markup” manual=”%3Ctextarea%20style%3D%22resize%3A%20none%3B%22%3E%3C%2Ftextarea%3E%0A” message=”html code” highlight=”” provider=”manual”/]
or in between <style>…</style> element tags
[pastacode lang=”css” manual=”textarea%20%0A%7B%0A%20%20%20%20resize%3A%20none%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]
SOLUTION 7:
[pastacode lang=”javascript” manual=”%24(‘textarea’).css(%22resize%22%2C%20%22none%22)%3B%0A” message=”javascript code” highlight=”” provider=”manual”/]
SOLUTION 8:
To resize your textarea’s only horizontal or vertical,
[pastacode lang=”css” manual=”textarea%20%7B%20resize%3A%20vertical%3B%20%7D%0A%0Atextarea%20%7B%20resize%3A%20horizontal%3B%20%7D%0A” message=”css code” highlight=”” provider=”manual”/]
Finally, resize: both enables the resize grabber.
SOLUTION 9:
Use the CSS3 resize(http://www.tutorialrepublic.com/css-reference/css3-resize-property.php) property to remove or turn-off the default horizontal and vertical resizable property of the HTML <textarea>(http://www.tutorialrepublic.com/html-reference/html-textarea-tag.php) element.
This property will also hide the resizing at the bottom-right corner of the textarea.
[pastacode lang=”css” manual=”textarea%20%0A%7B%0A%20%20%20%20resize%3A%20none%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]
[ad type=”banner”]
SOLUTION 10:
Specify that a <div> element should be resizable by the user:
[pastacode lang=”css” manual=”div%20%0A%7B%0A%20%20%20%20resize%3A%20both%3B%0A%20%20%20%20overflow%3A%20auto%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]
SOLUTION 11:
you can resize by restrictions i.e. none, both, horizontal, vertical, and inherit.
For below code, user can resize vertically, but the width is fixed.
[pastacode lang=”css” manual=”textarea%20%0A%7B%0Aresize%3A%20vertical%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]