How to disable manual resize of a element, but still allow for automatic resizing for text overflow?</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2022-07-30T16:44:55.290" class="fromnow">Jul 30 '22 at 16:44</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2022-07-30T18:41:55.537" datetime="2022-07-30T18:41:55.537">Jul 30 '22 at 18:41</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 211 times"> <span class="fc-light mr2">Viewed</span> 211 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="73177458" data-ownerid="13443391" data-score="0"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="73177458"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I'm sure there's an answer to this question somewhere on SO, but after some time of looking, I was unable to find one.</p> <p>What I'm trying to do is create a <code><textarea></code> element that the user CANNOT manually resize (there won't be a dragable resize item in the bottom-right corner for the user to resize with), but still the <code><textarea></code> element will automatically resize when the text flows to a new line.</p> <p>What I've tried is using <code>resize: none</code>, and while that eliminates manual resizing, it also removes automatic resizing when the content of the textarea goes too far within the space provided.</p> <p>To be clear, I do not want there to be a scroll bar when the text overflows the size of the <code><textarea></code>. I would like for the element to get larger to accommodate the additional text.</p> <p>Here's an example of what I've tried:</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>textarea { resize: none; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><textarea></textarea></code></pre> </div> </div> <p>As you can see, it removes manual resizing, but also removes automatic resizing.</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/css" class="post-tag js-gps-track" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/resize" class="post-tag js-gps-track" title="show questions tagged 'resize'" rel="tag">resize</a> <a href="../../questions/tagged/textarea" class="post-tag js-gps-track" title="show questions tagged 'textarea'" rel="tag">textarea</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jul 30 '22 at 16:44">asked Jul 30 '22 at 16:44</time> <a href="../../users/13443391/ipsdsilva" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/13443391.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="IPSDSILVA" /> </a> <div class="s-user-card--info"> <a href="../../users/13443391/ipsdsilva" class="s-user-card--link">IPSDSILVA</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,667</li> <li class="s-award-bling s-award-blingsilver" title="9 silver badges">9</li> <li class="s-award-bling s-award-bling__bronze" title="27 bronze badges">27</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-73177458" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="73177458" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-129239595" class="comment js-comment " data-comment-id="129239595" data-comment-owner-id="19262395" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment129239595_73177458"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I think you can refer to this. Hope it helps. <https:></https:></span> – <a href="../../users/19262395/titan-xp" title="399 reputation" class="comment-user ">Titan XP</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/73177458/how-to-disable-manual-resize-of-a-textarea-element-but-still-allow-for-automat#comment129239595_73177458"><span title="2022-07-30T17:04:38.123 License: CC BY-SA 4.0" class="relativetime-clean">Jul 30 '22 at 17:04</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">2 Answers<span style="display:none;" itemprop="answerCount">2</span></h2> </div> </div> </div> <a name="73177576"></a> <div id="answer-73177576" class="answer " data-answerid="73177576" data-ownerid="9406307" data-score="2" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="73177576"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="2">2</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>you can use contenteditable="true", it can auto resize when typing but can't be resized manually</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><span contenteditable="true">tester</span></code></pre> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jul 30 '22 at 17:01">answered Jul 30 '22 at 17:01</time> <a href="../../users/9406307/yudono-putro-utomo" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/9406307.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Yudono Putro Utomo" /> </a> <div class="s-user-card--info"> <a href="../../users/9406307/yudono-putro-utomo" class="s-user-card--link">Yudono Putro Utomo</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">162</li> <li class="s-award-bling s-award-blingbronze" title="5 bronze badges">5</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="73177655"></a> <div id="answer-73177655" class="answer accepted-answer" data-answerid="73177655" data-ownerid="3233135" data-score="1" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="73177655"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>There is an alternate of textarea using <a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable" rel="nofollow noreferrer"><code>contentEditable</code> property</a> in HTML. You can use "DIV" instead of "Textarea" along with "contentEditable" property and your textarea is ready. We can not resize it but it will resize according to the lenght of content</p> <p>Please check the below code snippet:</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.alternate-texarea{width:300px; min-height:40px; border:1px solid #000; border-radius:6px;padding:5px;}</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><strong id="alternate-textarea-label">Edit Me</strong> <div contentEditable aria-labelledby="alternate-textarea-label" role="textbox" aria-multiline="true" aria-placeholder="Street, City, Postal Code" class="alternate-texarea"> Edit the text </div></code></pre> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Jul 30 '22 at 18:41">edited Jul 30 '22 at 18:41</time> <a href="../../users/608042/andy" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/608042.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Andy" /> </a> <div class="s-user-card--info"> <a href="../../users/608042/andy" class="s-user-card--link">Andy</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">4,783</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="26 silver badges">26</li> <li class="s-award-bling s-award-blingbronze" title="51 bronze badges">51</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jul 30 '22 at 17:13">answered Jul 30 '22 at 17:13</time> <a href="../../users/3233135/ajay-malhotra" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3233135.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Ajay Malhotra" /> </a> <div class="s-user-card--info"> <a href="../../users/3233135/ajay-malhotra" class="s-user-card--link">Ajay Malhotra</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">798</li> <li class="s-award-bling s-award-blingsilver" title="4 silver badges">4</li> <li class="s-award-bling s-award-bling__bronze" title="16 bronze badges">16</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-73177655" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="73177655" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-129240229" class="comment js-comment " data-comment-id="129240229" data-comment-owner-id="13443391" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment129240229_73177655"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Thank you! Is there a way to have a placeholder for this `contenteditable` element?</span> – <a href="../../users/13443391/ipsdsilva" title="1,667 reputation" class="comment-user owner">IPSDSILVA</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/73177458/how-to-disable-manual-resize-of-a-textarea-element-but-still-allow-for-automat#comment129240229_73177655"><span title="2022-07-30T17:52:36.543 License: CC BY-SA 4.0" class="relativetime-clean">Jul 30 '22 at 17:52</span></a></span> </div> </div> </li> <li id="comment-129240569" class="comment js-comment " data-comment-id="129240569" data-comment-owner-id="608042" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment129240569_73177655"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Beware that you will need to use `aria-labelledby` for contenteditable because you will not be able to provide a label otherwise. If you want to provide a placeholder, you should use `aria-placeholder` as well, but you’ll need to add javascript to make it visible. on `input` you can set a class like `empty` if it’s so, and then add CSS `.alternate-textarea.empty::before { content: attr("aria-paceholder") }`</span> – <a href="../../users/608042/andy" title="4,783 reputation" class="comment-user ">Andy</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/73177458/how-to-disable-manual-resize-of-a-textarea-element-but-still-allow-for-automat#comment129240569_73177655"><span title="2022-07-30T18:18:49.497 License: CC BY-SA 4.0" class="relativetime-clean">Jul 30 '22 at 18:18</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>