{"id":417,"date":"2017-03-15T11:07:40","date_gmt":"2017-03-15T11:07:40","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=417"},"modified":"2017-03-29T17:40:01","modified_gmt":"2017-03-29T12:10:01","slug":"how-to-disable-resizable-property-of-textarea","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/how-to-disable-resizable-property-of-textarea\/","title":{"rendered":"[Solved &#8211; 11 Answers] How to disable resizable property of textarea"},"content":{"rendered":"<p><label class=\"label label-warning\">PROBLEM<\/label><\/p>\n<ul>\n<li>How to disable the resizable property of a textarea?<\/li>\n<li>We can resize a\u00a0textarea\u00a0by clicking on the bottom right corner of the\u00a0textarea\u00a0and dragging the mouse.<br \/>\nHow we can disable this?<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 1:<\/label><\/p>\n<ul>\n<li>To disable textareas, we can tried the following.<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dTo%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\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 2:<\/label><\/p>\n<ul>\n<li>The following CSS rule disables resizing behavior for textarea elements:<\/li>\n<\/ul>\n<ul>\n<li><b>CSS :<\/b><\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dTextarea%0A%7B%0A%20%20%20%20resize%3A%20none%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 3:<\/label><\/p>\n<ul>\n<li>We can try this :<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ctextarea%20style%3D%22resize%3Anone%22%20rows%3D%2210%22%20placeholder%3D%22Enter%20Text%22%20%3E%0A%3C%2Ftextarea%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 4:<\/label><\/p>\n<ul>\n<li>This is one of the best solution :<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dtextarea%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\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 5:<\/label><\/p>\n<ul>\n<li><strong>Html :<\/strong><\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%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\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 6:<\/label><\/p>\n<ul>\n<li>CSS property:<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dresize%3A%20none%3B%0A\u201d message=\u201d\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>you can use CSS inline style property :<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ctextarea%20style%3D%22resize%3A%20none%3B%22%3E%3C%2Ftextarea%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>or in between\u00a0<style>\u2026<\/style>\u00a0element tags<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dtextarea%20%0A%7B%0A%20%20%20%20resize%3A%20none%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 7:<\/label><\/p>\n<ul>\n<li>Try with jQuery also<\/li>\n<\/ul>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%24(\u2018textarea\u2019).css(%22resize%22%2C%20%22none%22)%3B%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 8:<\/label><\/p>\n<ul>\n<li>To resize your textarea\u2019s only\u00a0horizontal\u00a0or\u00a0vertical,<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dtextarea%20%7B%20resize%3A%20vertical%3B%20%7D%0A%0Atextarea%20%7B%20resize%3A%20horizontal%3B%20%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>Finally,\u00a0resize: both\u00a0enables the resize grabber.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 9:<\/label><\/p>\n<ul>\n<li>Use the CSS3\u00a0resize(http:\/\/www.tutorialrepublic.com\/css-reference\/css3-resize-property.php)\u00a0property to remove or turn-off the default horizontal and vertical resizable property of the HTML\u00a0<textarea>(http:\/\/www.tutorialrepublic.com\/html-reference\/html-textarea-tag.php)\u00a0element.<\/li>\n<li>This property will also hide the resizing at the bottom-right corner of the textarea.<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dtextarea%20%0A%7B%0A%20%20%20%20resize%3A%20none%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 10:<\/label><\/p>\n<ul>\n<li>Specify that a <div> element should be resizable by the user:<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201ddiv%20%0A%7B%0A%20%20%20%20resize%3A%20both%3B%0A%20%20%20%20overflow%3A%20auto%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 11:<\/label><\/p>\n<ul>\n<li>you can resize by restrictions i.e. none, both, horizontal, vertical, and inherit.<\/li>\n<li>For below code, user can resize vertically, but the width is fixed.<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dtextarea%20%0A%7B%0Aresize%3A%20vertical%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM How to disable the resizable property of a textarea? We can resize a\u00a0textarea\u00a0by clicking on the bottom right corner of the\u00a0textarea\u00a0and dragging the mouse. How we can disable this? SOLUTION 1: To disable textareas, we can tried the following. [pastacode lang=\u201dcss\u201d manual=\u201dTo%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\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/] SOLUTION 2: The following CSS rule disables resizing [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[854,848,858,844,851,845,853,846,850,843,847,842,855,849,860,859,857,852,856],"class_list":["post-417","post","type-post","status-publish","format-standard","hentry","category-css","tag-auto-resize-textarea","tag-bootstrap-css-textarea-disable-resize-ukd7hyuz7x","tag-css-textarea-size","tag-css3-resize-property","tag-disable-resizable","tag-disable-resizable-property-of-textarea","tag-disable-textarea-resize-html","tag-how-to-disable-resizable-property-of-text-area","tag-how-to-disable-resizable-property-of-textarea","tag-how-to-disable-resizable-property-of-textarea-using-css","tag-how-to-disable-resize-property-of-textarea","tag-html-how-to-disable-resizable-property-of-textarea","tag-html-textarea-resize-off","tag-resize","tag-textarea-disable","tag-textarea-disable-resize-bootstrap","tag-textarea-overflow","tag-textarea-resize-css","tag-textarea-resize-vertical-only"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=417"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/417\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}