0

I am a newbie with the css and html. I am using textarea to make user input multi line content, this is the minimal code I have made to show the issue I am facing, the App.tsx code look like this:

import React, { useState } from "react";

const App: React.FC = () => {
  const [promptLines, setPromptLines] = useState<number>(1);

const handleChange = (e: any) => {
  const inputContent = e.target.value;
  if (inputContent && inputContent.length > 0) {
      const talkInput = document.getElementById("talkInput");
      if(!talkInput) return;
      const lineHeight = parseInt(window.getComputedStyle(talkInput).getPropertyValue('line-height'));
      talkInput.style.cssText = 'line-height: 23px;';
      const scrlht = talkInput.scrollHeight;
      const lines = Math.floor(scrlht / lineHeight);
      console.log(lines);
  }
}


  return (
    <div className="outerdiv">
     <textarea 
     id="talkInput"
     rows={promptLines ? promptLines : 1}
      onChange={handleChange}></textarea>
    </div>
  );
}

export default App;

and this is the App.css css file look like:

.outerdiv{
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 25px;
  border: 2px solid #ccc;
  transition: border-color 0.5s ease;
  width: 80%;
  margin: auto;
  margin-bottom: 15px;
  margin-top: 10px;
  box-sizing: border-box;
  min-height: 40px;
}

.outerdiv textarea{
    flex: 1;
    border: none;
    border-radius: 25px;
    outline: none;
    font-size: 16px;
    font-family: sans-serif;
    resize: none;
    padding: 6px;
    min-height: 23px;
    line-height: 23px;
    height: 1rem;
}

when I input the content into textarea, the lines will increase, when I delete the contnet from textarea, the lines will decrease, all things work as expect, but the minimal lines are 3. It will not decrease less than 3 rows. why scrollHeight stop decrease in 3 rows height? is it possible to make the scrollHeight continue decrease until to 1 row?

Dolphin
  • 29,069
  • 61
  • 260
  • 539
  • You seem to have a syntax error in your javascript that means your JS isn't working at all. Can you have a look at it? – Adam May 24 '23 at 17:13
  • Why don't you use [this answer](https://stackoverflow.com/a/76325173/12571484) to your earlier question? The textarea dynamically increases and decreases in height and shrinks down to one line. – Adam May 24 '23 at 17:15
  • ok, I am not femiliar with the code snip, can i paste the react code? – Dolphin May 24 '23 at 17:15
  • I am exactly using that answer, that answer was worked, but I found a new issue. And I have tried but still could not figure out where is going wrong. – Dolphin May 24 '23 at 17:16
  • Sorry. my bad. The syntax error is because you're using typescript. – Adam May 24 '23 at 17:19

1 Answers1

1

Here is an example using div instead of textarea with contentEditable="true". Is that what you need?

.my-div {
    width: 200px;
    border:1px solid black;
    min-height: 20px;
    max-height:100px; 
    overflow-y: auto
}
<div contentEditable="true" class="my-div"></div>
Azu
  • 1,494
  • 2
  • 6
  • 11
  • is it possible to use textarea because I have another logic, I found the google bard input could do it like this https://bard.google.com/ – Dolphin May 24 '23 at 18:00