{"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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">To disable a specific textarea with the name attribute set to wiki (i.e., &lt;textarea name=\u201cwiki&quot;&gt;&lt;\/textarea&gt;)<br\/>textarea[name=wiki] <br\/>{<br\/>    resize: none;<br\/>}<br\/><br\/>Using an id attribute (i.e., &lt;textarea id=\u201cwiki&quot;&gt;&lt;\/textarea&gt;):<br\/>#wiki <br\/>{<br\/>    resize: none;<br\/>}<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">Textarea<br\/>{<br\/>    resize: none;<br\/>}<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p><label class=\"label label-info\">SOLUTION 3:<\/label><\/p>\n<ul>\n<li>We can try this :<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;textarea style=&quot;resize:none&quot; rows=&quot;10&quot; placeholder=&quot;Enter Text&quot; &gt;<br\/>&lt;\/textarea&gt;<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">textarea <br\/>{<br\/>    max-width:\/*desired fixed width*\/ px;<br\/>    min-width:\/*desired fixed width*\/ px;<br\/>    min-height:\/*desired fixed height*\/ px;<br\/>    max-height:\/*desired fixed height*\/ px;<br\/>}<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 5:<\/label><\/p>\n<ul>\n<li><strong>Html :<\/strong><\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;textarea name=&quot;textinput&quot;    draggable=&quot;false&quot;&gt;&lt;\/textarea&gt;<br\/><br\/>Default value is\u00a0true\u00a0for draggable attribute. <\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p><label class=\"label label-info\">SOLUTION 6:<\/label><\/p>\n<ul>\n<li>CSS property:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">resize: none;<\/code><\/pre> <\/div>\n<ul>\n<li>you can use CSS inline style property :<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;textarea style=&quot;resize: none;&quot;&gt;&lt;\/textarea&gt;<\/code><\/pre> <\/div>\n<ul>\n<li>or in between\u00a0&lt;style&gt;&#8230;&lt;\/style&gt;\u00a0element tags<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">textarea <br\/>{<br\/>    resize: none;<br\/>}<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 7:<\/label><\/p>\n<ul>\n<li>Try with jQuery also<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">$(&#039;textarea&#039;).css(&quot;resize&quot;, &quot;none&quot;);<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 8:<\/label><\/p>\n<ul>\n<li>To resize your textarea&#8217;s only\u00a0horizontal\u00a0or\u00a0vertical,<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">textarea { resize: vertical; }<br\/><br\/>textarea { resize: horizontal; }<\/code><\/pre> <\/div>\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&lt;textarea&gt;(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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">textarea <br\/>{<br\/>    resize: none;<br\/>}<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p><label class=\"label label-info\">SOLUTION 10:<\/label><\/p>\n<ul>\n<li>Specify that a &lt;div&gt; element should be resizable by the user:<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">div <br\/>{<br\/>    resize: both;<br\/>    overflow: auto;<br\/>}<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">textarea <br\/>{<br\/>resize: vertical;<br\/>}<\/code><\/pre> <\/div>\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. SOLUTION 2: The following CSS rule disables resizing behavior for textarea elements: CSS : [ad [&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}]}}