Question 198453 in Html Question posted in
Some basic documentation can be found here.

Html – How to set a limit to height growing text area

I have this:

<div class="overflow-scroll resize-none w-full max-w-full flex flex-col-reverse">
  <textarea
    id="content"
    rows="1"
    class="min-h-full bg-white rounded shadow px-6 py-4 w-full max-w-full resize-none"
    placeholder="Type here..."
    oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
    style="overflow: hidden;"
  ></textarea>
</div>

The component is then referred in multiple pages where the exact sizing and max height can be determined.
The issue I have now is that it doesn’t stop expanding. I need it to stop as soon as it reaches the max-h of the parent div in the other page file. I’ve searched the web for days now, and can’t seem to find a good method. Maybe one of you guys have some knowledge I could learn? I’ve seen that facebook uses div’s instead and just ads editablecontent="true", but then I’m still wondering how they set a limit. Also, there has to be a way by using textarea’s because a placeholder is important.

I tried the code above, which does most of my needs already. Just not the expanding limit yet.
The main goal is to end up with an input bar similar to the one on chatGPT, that’s the perfect demo of what I’m trying to get. I really hope I’m not violating any rules, if so just tell me and I’ll gladly edit what I did wrong.

Tags:

2

Answers


  1. 0

    We can set limit by adding max-height: 150px

    <div class="overflow-scroll resize-none w-full max-w-full flex flex-col-reverse">
  <textarea
    id="content"
    rows="1"
    class="min-h-full bg-white rounded shadow px-6 py-4 w-full max-w-full resize-none"
    placeholder="Type here..."
    oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
    style="overflow: hidden; max-height: 150px"
  ></textarea>
</div>
    Login or Signup to reply.
  2. 0

    Set a fixed height to the div parent and then set the max-height of the textarea child to 100% like shown below.

    div {
height: 120px; /* fixed height value */
}

div textarea{
max-height: 100%; /* same height as parent */
}
    <div class="overflow-scroll resize-none w-full max-w-full flex flex-col-reverse">
  <textarea
    id="content"
    rows="1"
    class="min-h-full bg-white rounded shadow px-6 py-4 w-full max-w-full resize-none"
    placeholder="Type here..."
    oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
    style="overflow: hidden;"
  ></textarea>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search