How to disable scroll in and expand it according to the text inside parent container?</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="2021-11-16T10:11:44.037" class="fromnow">Nov 16 '21 at 10:11</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2021-11-16T10:11:44.037" datetime="2021-11-16T10:11:44.037">Nov 16 '21 at 10:11</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 47 times"> <span class="fc-light mr2">Viewed</span> 47 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="69987229" data-ownerid="11494207" 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="69987229"> <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 am trying to make a notes app, which has textarea and user can add checkboxes and other tools as well (like notion). but I can't combine those all well inside a container.Here's the html for container in which</p> <pre><code> <div class="editor"> <input type="text" class="notes-title" placeholder="Your Title..."> <div class="text-body"> <textarea class="notes-body" placeholder="Start writing your notes here..."></textarea> </div> </div> </code></pre> <p>This is what I add using insertAdjacentHTML() in JS,</p> <pre><code><div class="tool-container"> <input type="checkbox" id="checkbox" value="HTML"><span class="checkmark"></span> <label for="html"><textarea class="notes-body" placeholder="task..."></textarea></label> </div> </code></pre> <p>I want to add the checkbox after the endline of the textarea, but the checkbox is added at the sameplace inside editor, no matter where textarea ends, and if the text area overflows it starts scrolling in the same space rather than expanding. CSS classes</p> <pre><code>.notes-body{ flex-shrink: 1; line-height: 1.5; overflow: visible; } .text-body { display: flex; flex-direction: column; font-size: 1.2em; line-height: 1.5; margin-top: 3px; padding: 5px; width: 100%; height:100%; } .tool-container{ display: flex; flex-shrink: 1; line-height: 1.5; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .tool-container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .tool-container .notes-body{ width: 100%; height: 100%; line-height: 1.5; } .tool-bar{ border-top: solid grey 1px; display: flex; padding: 3px; margin: 5px; } </code></pre> <p>Please help me set the textarea such that it expands inside parent container, and the next flex-item (checkbox/img etc) comes right next to it.</p> <hr/></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/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 owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Nov 16 '21 at 10:11">asked Nov 16 '21 at 10:11</time> <a href="../../users/11494207/nisha-chauhan" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/11494207.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="NISHA CHAUHAN" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/11494207/nisha-chauhan" class="s-user-card--link">NISHA CHAUHAN</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-blingbronze" title="1 bronze badges">1</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-69987229" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="69987229" 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-123722149" class="comment js-comment " data-comment-id="123722149" data-comment-owner-id="12761586" 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="comment123722149_69987229"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Does [this SO post](https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize) help you with expanding the `<textarea>` size with the containing text? – deekeh Nov 16 '21 at 13:13

0 Answers0