flexible height of as a new line breaks</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="2016-07-20T04:37:50.070" class="fromnow">Jul 20 '16 at 04:37</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2020-08-16T16:05:45.837" datetime="2020-08-16T16:05:45.837">Aug 16 '20 at 16:05</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 6,912 times"> <span class="fc-light mr2">Viewed</span> 6,912 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="38472424" data-ownerid="6266442" data-score="10"> <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="38472424"> <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="10">10</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 haven't seen this done before but I'm hoping it can be done. I'm trying to have an automatic height of a textarea as text is written inside of it. As seen here...</p> <p><a class="external-link" href="https://i.stack.imgur.com/oxRfj.jpg" rel="noreferrer">https://i.stack.imgur.com/oxRfj.jpg</a></p> <p><a class="external-link" href="https://i.stack.imgur.com/XVzYT.jpg" rel="noreferrer">https://i.stack.imgur.com/XVzYT.jpg</a></p> <p>Hopefully these images explain what I mean. the second image is also showing its theoretical max height.</p> <p><a class="external-link" href="https://jsfiddle.net/nupk26Ly/" rel="noreferrer">https://jsfiddle.net/nupk26Ly/</a></p> <pre><code>.text-f { border: none; border-bottom: #183A4C solid 1px; color: #183A4C; font: 1rem/2.4rem Georgia, serif; margin-top: 40px; resize: none; height: 40px; width: 100%; } </code></pre></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag js-gps-track" title="show questions tagged 'jquery'" rel="tag">jquery</a> <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> </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="user-info "> <div class="user-action-time">edited <span title="2016-07-22T05:56:21.157" class="relativetime">Jul 22 '16 at 05:56</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Max Power</span> <div class="-flair"></div> </div> </div> </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 20 '16 at 04:37">asked Jul 20 '16 at 04:37</time> <a href="../../users/6266442/max-power" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/6266442.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Max Power" /> </a> <div class="s-user-card--info"> <a href="../../users/6266442/max-power" class="s-user-card--link">Max Power</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">153</li> <li class="s-award-bling s-award-blingsilver" title="2 silver badges">2</li> <li class="s-award-bling s-award-bling__bronze" title="12 bronze badges">12</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-38472424" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="38472424" 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-64348150" class="comment js-comment " data-comment-id="64348150" data-comment-owner-id="6395838" 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="comment64348150_38472424"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">You can try this. http://stackoverflow.com/q/38417557/6395838 Using `contentedible` + autogrow with height transition. It acts like a textarea or a textbox with autogrow functionality.</span> – <a href="../../users/6395838/cookie-ninja" title="1,156 reputation" class="comment-user ">Cookie Ninja</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/38472424/flexible-height-of-textarea-as-a-new-line-breaks#comment64348150_38472424"><span title="2016-07-20T04:44:28.913 License: CC BY-SA 3.0" class="relativetime-clean">Jul 20 '16 at 04:44</span></a></span> </div> </div> </li> <li id="comment-64348279" class="comment js-comment " data-comment-id="64348279" data-comment-owner-id="1540570" 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="comment64348279_38472424"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Why have you set resize to none then? https://davidwalsh.name/textarea-resize</span> – <a href="../../users/1540570/carol-mckay" title="2,438 reputation" class="comment-user ">Carol McKay</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/38472424/flexible-height-of-textarea-as-a-new-line-breaks#comment64348279_38472424"><span title="2016-07-20T04:52:14.857 License: CC BY-SA 3.0" class="relativetime-clean">Jul 20 '16 at 04:52</span></a></span> </div> </div> </li> <li id="comment-64348356" class="comment js-comment " data-comment-id="64348356" data-comment-owner-id="1540570" 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="comment64348356_38472424"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Not supported by ie http://caniuse.com/#search=resize</span> – <a href="../../users/1540570/carol-mckay" title="2,438 reputation" class="comment-user ">Carol McKay</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/38472424/flexible-height-of-textarea-as-a-new-line-breaks#comment64348356_38472424"><span title="2016-07-20T04:56:09.120 License: CC BY-SA 3.0" class="relativetime-clean">Jul 20 '16 at 04:56</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">3 Answers<span style="display:none;" itemprop="answerCount">3</span></h2> </div> </div> </div> <a name="38472500"></a> <div id="answer-38472500" class="answer accepted-answer" data-answerid="38472500" data-ownerid="4947434" data-score="10" 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="38472500"> <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="10">10</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>Here is a solution using jquery. Hope it helps.</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="true" data-lang="js"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-js lang-js prettyprint-override"><code>function h(e) { $(e).css({'height':'40','overflow-y':'hidden'}).height(e.scrollHeight); } $('textarea').each(function () { h(this); }).on('input', function () { h(this); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>.text-f { border: none; border-bottom: #183A4C solid 1px; color: #183A4C; font: 1rem/2.4rem Georgia, serif; margin-top: 40px; height: 40px; width: 100%; } .form-btn { background: #183A4C; border: solid 1px #183A4C; color: #fff; cursor: pointer; display: block; font: 1rem/1.333rem Georgia, serif; height: 30px; width: 140px; margin: 10px 0; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <textarea name="Message" class="text-f" placeholder="Describe your project..."></textarea> <button class="form-btn" type="button">Submit</button></code></pre> </div> </div> <p>Pure Javascript solution (PS: I added an ID (textarea) to the textarea tag )</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-js lang-js prettyprint-override"><code>var textarea = document.getElementById("textarea"); textarea.oninput = function() { textarea.style.height = ""; /* textarea.style.height = Math.min(textarea.scrollHeight, 300) + "px"; */ textarea.style.height = textarea.scrollHeight + "px" };</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>.text-f { border: none; border-bottom: #183A4C solid 1px; color: #183A4C; font: 1rem/2.4rem Georgia, serif; width: 100%; resize: none; height: 40px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="content"> <div id="main-headline"> <h1 class="main-header">Fill out the form or contact me alternatively.</h1> </div>  <div class="content-container">  <section class="row">  <form name="contact-f" action="#" method="post"> <div class="col-3 c-right-col"> <textarea id="textarea" name="Message" class="text-f" placeholder="Describe your project..."></textarea> <button class="link-btn form-btn" type="button">Submit</button> </div> </form> </section> </div> </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="user-info "> <div class="user-action-time">edited <span title="2020-08-16T16:05:45.837" class="relativetime">Aug 16 '20 at 16:05</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Jinu Kurian</span> <div class="-flair"></div> </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 20 '16 at 04:45">answered Jul 20 '16 at 04:45</time> <a href="../../users/4947434/jinu-kurian" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4947434.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Jinu Kurian" /> </a> <div class="s-user-card--info"> <a href="../../users/4947434/jinu-kurian" class="s-user-card--link">Jinu Kurian</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">9,128</li> <li class="s-award-bling s-award-blinggold" title="3 gold badges">3</li> <li class="s-award-bling s-award-blingsilver" title="27 silver badges">27</li> <li class="s-award-bling s-award-bling__bronze" title="35 bronze badges">35</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-38472500" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="38472500" 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-64361154" class="comment js-comment " data-comment-id="64361154" data-comment-owner-id="6266442" 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="comment64361154_38472500"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">This looks clean and I see it works. But I can't seem to get it to work on in my project, no clue why. I may have to go with Rachel's answer. Thanks for your time :)</span> – <a href="../../users/6266442/max-power" title="153 reputation" class="comment-user owner">Max Power</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/38472424/flexible-height-of-textarea-as-a-new-line-breaks#comment64361154_38472500"><span title="2016-07-20T11:05:46.573 License: CC BY-SA 3.0" class="relativetime-clean">Jul 20 '16 at 11:05</span></a></span> </div> </div> </li> <li id="comment-64386504" class="comment js-comment " data-comment-id="64386504" data-comment-owner-id="6266442" 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="comment64386504_38472500"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I'm now going with your answer Jinu, it has more flexibility for alignment. However the jquery isn't working in my project but it's fine here https://jsfiddle.net/o066jcn7/2/ . Once I work it out I'll mark this as correct :) ...(solution was to insert script inside the body tag)</span> – <a href="../../users/6266442/max-power" title="153 reputation" class="comment-user owner">Max Power</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/38472424/flexible-height-of-textarea-as-a-new-line-breaks#comment64386504_38472500"><span title="2016-07-20T23:48:16.403 License: CC BY-SA 3.0" class="relativetime-clean">Jul 20 '16 at 23:48</span></a></span> </div> </div> </li> <li id="comment-64391738" class="comment js-comment " data-comment-id="64391738" data-comment-owner-id="4947434" 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="comment64391738_38472500"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">you can use pure javascript for this. I will give a solution using pure js. check out this fiddle - https://jsfiddle.net/o066jcn7/3/</span> – <a href="../../users/4947434/jinu-kurian" title="9,128 reputation" class="comment-user ">Jinu Kurian</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/38472424/flexible-height-of-textarea-as-a-new-line-breaks#comment64391738_38472500"><span title="2016-07-21T05:43:32.250 License: CC BY-SA 3.0" class="relativetime-clean">Jul 21 '16 at 05:43</span></a></span> </div> </div> </li> <li id="comment-64396574" class="comment js-comment " data-comment-id="64396574" data-comment-owner-id="6266442" 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="comment64396574_38472500"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Cheers, I did manage to get the jquery working. Javascript / Jquery are far behond me so thanks for the help.</span> – <a href="../../users/6266442/max-power" title="153 reputation" class="comment-user owner">Max Power</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/38472424/flexible-height-of-textarea-as-a-new-line-breaks#comment64396574_38472500"><span title="2016-07-21T08:01:27.413 License: CC BY-SA 3.0" class="relativetime-clean">Jul 21 '16 at 08:01</span></a></span> </div> </div> </li> <li id="comment-112157608" class="comment js-comment " data-comment-id="112157608" data-comment-owner-id="13696834" 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="comment112157608_38472500"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Why did u use Math.min? Why is that necessary?</span> – <a href="../../users/13696834/jon-nezbit" title="323 reputation" class="comment-user ">Jon Nezbit</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/38472424/flexible-height-of-textarea-as-a-new-line-breaks#comment112157608_38472500"><span title="2020-08-15T15:33:03.193 License: CC BY-SA 4.0" class="relativetime-clean">Aug 15 '20 at 15:33</span></a></span> </div> </div> </li> <li id="comment-112177563" class="comment js-comment " data-comment-id="112177563" data-comment-owner-id="4947434" 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="comment112177563_38472500"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@JonNezbit math.min can be used to set a limit to the textarea height like this textarea.style.height = Math.min(textarea.scrollHeight, 100) + "px"; - here the textarea will have a height limit of 100px. You don't need to use Math.min in this solution. My bad.</span> – <a href="../../users/4947434/jinu-kurian" title="9,128 reputation" class="comment-user ">Jinu Kurian</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/38472424/flexible-height-of-textarea-as-a-new-line-breaks#comment112177563_38472500"><span title="2020-08-16T16:03:42.363 License: CC BY-SA 4.0" class="relativetime-clean">Aug 16 '20 at 16:03</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="38472606"></a> <div id="answer-38472606" class="answer " data-answerid="38472606" data-ownerid="1675954" data-score="3" 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="38472606"> <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="3">3</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>this is a an <a class="external-link" href="https://jsfiddle.net/RachGal/3tmdbtd6/" rel="nofollow">auto-expandable text area</a> that i did a while ago, might work for you. works on mobiles too</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-js lang-js prettyprint-override"><code>$(document) .one('focus.textarea', '.autoExpand', function(){ var savedValue = this.value; this.value = ''; this.baseScrollHeight = this.scrollHeight; this.value = savedValue; }) .on('input.textarea', '.autoExpand', function(){ var minRows = this.getAttribute('data-min-rows')|0, rows; this.rows = minRows; rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16); this.rows = minRows + rows; }); function updateTextbox(text) { $('#cagetextbox').val(text); //$('#cagetextbox').attr("rows", Math.max.apply(null, text.split("\n").map(function(a){alert(a.length);return a.length;}))); }; updateTextbox("");</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>textarea{ display:block; box-sizing: padding-box; overflow:hidden; padding:10px; width:250px; font-size:14px; margin:50px auto; border-radius:8px; border:6px solid #556677; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <textarea id="cagetextbox" class='autoExpand' rows='3' data-min-rows='3' placeholder='Write here!! I expand!'></textarea> </body></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 20 '16 at 04:56">answered Jul 20 '16 at 04:56</time> <a href="../../users/1675954/rachel-gallen" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1675954.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Rachel Gallen" /> </a> <div class="s-user-card--info"> <a href="../../users/1675954/rachel-gallen" class="s-user-card--link">Rachel Gallen</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">27,943</li> <li class="s-award-bling s-award-blinggold" title="21 gold badges">21</li> <li class="s-award-bling s-award-blingsilver" title="72 silver badges">72</li> <li class="s-award-bling s-award-bling__bronze" title="81 bronze badges">81</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-38472606" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="38472606" 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-64348441" class="comment js-comment " data-comment-id="64348441" data-comment-owner-id="1675954" 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="comment64348441_38472606"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">you'll note i have a min-rows specifed, likewise you can specify max-rows or max-height</span> – <a href="../../users/1675954/rachel-gallen" title="27,943 reputation" class="comment-user ">Rachel Gallen</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/38472424/flexible-height-of-textarea-as-a-new-line-breaks#comment64348441_38472606"><span title="2016-07-20T05:00:30.490 License: CC BY-SA 3.0" class="relativetime-clean">Jul 20 '16 at 05:00</span></a></span> </div> </div> </li> <li id="comment-64360419" class="comment js-comment " data-comment-id="64360419" data-comment-owner-id="6266442" 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="comment64360419_38472606"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Thanks a lot! works well, still need to play around with it but it seems to do the job.</span> – <a href="../../users/6266442/max-power" title="153 reputation" class="comment-user owner">Max Power</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/38472424/flexible-height-of-textarea-as-a-new-line-breaks#comment64360419_38472606"><span title="2016-07-20T10:47:24.337 License: CC BY-SA 3.0" class="relativetime-clean">Jul 20 '16 at 10:47</span></a></span> </div> </div> </li> <li id="comment-64360482" class="comment js-comment " data-comment-id="64360482" data-comment-owner-id="1675954" 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="comment64360482_38472606"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">great! glad i could help :)</span> – <a href="../../users/1675954/rachel-gallen" title="27,943 reputation" class="comment-user ">Rachel Gallen</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/38472424/flexible-height-of-textarea-as-a-new-line-breaks#comment64360482_38472606"><span title="2016-07-20T10:48:49.673 License: CC BY-SA 3.0" class="relativetime-clean">Jul 20 '16 at 10:48</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="38472815"></a> <div id="answer-38472815" class="answer " data-answerid="38472815" data-ownerid="4301330" data-score="1" 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="38472815"> <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> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><pre><code>$(document) .one('focus.textarea', '.autoExpand', function(){ var savedValue = this.value; this.value = ''; this.baseScrollHeight = this.scrollHeight; this.value = savedValue; }) .on('input.textarea', '.autoExpand', function(){ var minRows = this.getAttribute('data-min-rows')|0, rows; this.rows = minRows; console.log(this.scrollHeight , this.baseScrollHeight); rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 17); this.rows = minRows + rows; }); </code></pre> <p><a class="external-link" href="http://codepen.io/vsync/pen/frudD" rel="nofollow"><strong>Check this link</strong></a></p></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 20 '16 at 05:14">answered Jul 20 '16 at 05:14</time> <a href="../../users/4301330/ranjan" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4301330.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Ranjan" /> </a> <div class="s-user-card--info"> <a href="../../users/4301330/ranjan" class="s-user-card--link">Ranjan</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">929</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="6 silver badge">6</li> <li class="s-award-bling s-award-bling__bronze" title="19 bronze badge">19</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-38472815" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="38472815" 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-77223552" class="comment js-comment " data-comment-id="77223552" data-comment-owner-id="5757434" 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="comment77223552_38472815"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I find that it gives this.baseScrollHeight as undefined</span> – <a href="../../users/5757434/thomas-williams" title="1,528 reputation" class="comment-user ">Thomas Williams</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/38472424/flexible-height-of-textarea-as-a-new-line-breaks#comment77223552_38472815"><span title="2017-07-16T08:53:50.470 License: CC BY-SA 3.0" class="relativetime-clean">Jul 16 '17 at 08:53</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>