“resize: none;” on textareas is bad UX

Catalin Rosu:

Sometimes you need to type a long reply that consists of many paragraphs and wrapping that text within a tiny textarea box makes it hard to understand and to follow as you type. There were many times when I had to write that text within Notepad++ for example and then just paste the whole reply in that small textarea. I admit I also opened the DevTools to override the resize: none declaration but that’s not really a productive way to do things.

Removing the default resizeability of a </code> is generally user-hurting vanity. Even if the resized textarea “breaks” the site layout, too bad, the user is trying to do something very important on this site right now and you should not let anything get in the way of that. I know the web is a big place though, so feel free to prove me wrong in the comments. </p> <p>This must have been cathartic for Catalin, who has been steadily gaining a reputation on Stack Overflow for an answer on how to prevent a textarea from resizing from almost a decade ago.</p> <p><a href="https://catalin.red/css-resize-none-is-bad-for-ux/" title="Direct link to featured article">Direct Link to Article</a> — <a href="https://css-tricks.com/resize-none-on-textareas-is-bad-ux/">Permalink</a></p> <p>The post <a rel="nofollow" href="https://css-tricks.com/resize-none-on-textareas-is-bad-ux/">“resize: none;” on textareas is bad UX</a> appeared first on <a rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> </div> </div> <div class="section section-blog-info"> <div class="row"> <div class="col-md-6"> <div class="entry-categories">Categories: <span class="label label-primary"><a href="https://aayugcreation.com/category/photoshop-tuts/">Photoshop tuts</a></span> </div> </div> <div class="col-md-6"> <div class="entry-social"> <a target="_blank" rel="tooltip" data-original-title="Share on Facebook" class="btn btn-just-icon btn-round btn-facebook" href="https://www.facebook.com/sharer.php?u=https://aayugcreation.com/resize-none-on-textareas-is-bad-ux/"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="20" height="17"><path fill="currentColor" d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg> </a> <a target="_blank" rel="tooltip" data-original-title="Share on Twitter" class="btn btn-just-icon btn-round btn-twitter" href="http://twitter.com/share?url=https://aayugcreation.com/resize-none-on-textareas-is-bad-ux/&text=%E2%80%9Cresize%3A%20none%3B%E2%80%9D%20on%20textareas%20is%20bad%20UX"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20" height="17"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg> </a> <a rel="tooltip" data-original-title=" Share on Email" class="btn btn-just-icon btn-round" href="mailto:?subject=“resize:%20none;”%20on%20textareas%20is%20bad%20UX&body=https://aayugcreation.com/resize-none-on-textareas-is-bad-ux/"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20" height="17"><path fill="currentColor" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path></svg> </a> </div> </div> </div> <hr> <div id="comments" class="section section-comments"> <div class="row"> <div class="col-md-12"> <div class="media-area"> <h3 class="hestia-title text-center"> 0 Comments </h3> </div> <div class="media-body"> <div id="respond" class="comment-respond"> <h3 class="hestia-title text-center">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/resize-none-on-textareas-is-bad-ux/#respond" style="display:none;">Cancel reply</a></small></h3><span class="pull-left author"><div class="avatar"><img alt="Avatar placeholder" height="64" width="64" data-src="https://aayugcreation.com/wp-content/themes/hestia/assets/img/placeholder.jpg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img src="https://aayugcreation.com/wp-content/themes/hestia/assets/img/placeholder.jpg" alt="Avatar placeholder" height="64" width="64"/></noscript></div></span><form autocomplete="off" action="https://aayugcreation.com/wp-comments-post.php" method="post" id="commentform" class="form media-body"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><div class="row"> <div class="col-md-4"> <div class="form-group label-floating is-empty"> <label class="control-label">Name <span class="required">*</span></label><input id="author" name="author" class="form-control" type="text" aria-required='true' /> <span class="hestia-input"></span> </div> </div> <div class="col-md-4"> <div class="form-group label-floating is-empty"> <label class="control-label">Email <span class="required">*</span></label><input id="email" name="email" class="form-control" type="email" aria-required='true' /> <span class="hestia-input"></span> </div> </div> <div class="col-md-4"> <div class="form-group label-floating is-empty"> <label class="control-label">Website</label><input id="url" name="url" class="form-control" type="url" aria-required='true' /> <span class="hestia-input"></span> </div> </div> </div> <div class="form-group label-floating is-empty"> <label class="control-label">What's on your mind?</label><textarea id="comment" name="comment" class="form-control" rows="6" aria-required="true">