How do i resize a textarea, to content width, having min-width and max-width?

Question

So, i have troubles with a textarea now, and i cant make it resize to a content width... Ive found a long and detailed answer about content height, and it works !! but not having the content width on it...

This is that post: Creating a textarea with auto-resize

BUT, my issue isnt solved, i need the width to resize too. Considering max and min widths.

This is the example code:

$("textarea").each(function () {
  this.setAttribute("style", "height:" + (this.scrollHeight) + "px;");
}).on("input", function () {
  this.style.height = 0;
  this.style.height = (this.scrollHeight) + "px";
});
$("textarea").trigger("input");

textarea{
  border: 1px solid black;
  min-width: 50px;
  max-width: 300px;
  width: auto;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.3.min.js"></script>
<textarea>this is my normal content, and it has to consider this content to be as long as the max-width</textarea>
<textarea>this is my normal content, should be consider</textarea>
<textarea>this is my min content</textarea>

Also, this is how i want them to be:

From experience, I would very much recommend you use `
`, AFAIK there's no solution without javascript involved, but I could be wrong — savageGoat, Mar 09 '23 at 21:05
EDIT: there's no solution without A LOT* of javascript involved — savageGoat, Mar 09 '23 at 21:19
@savageGoat We where using a div, but they wanted a textarea... idk why. — Excorpion, Mar 10 '23 at 13:53
Oh wait, i remember now, i need a textarea, because the div doesnt respect the lines... so if i write 2 lines, it doesnt show them on the div. — Excorpion, Mar 10 '23 at 14:32

savageGoat · Accepted Answer · 2023-03-09T21:16:21.913

2

Something like this?

Note: as said in the comment, this technique uses the contenteditable property instead

#myInput {
  min-height: 20px;
  max-height: 100px;
  overflow: auto;
  border: 1px solid #000;
  border-radius: 4px;
  max-width: 80%;
  min-width: 40px;
  display: inline-block;
  padding: 7px;
  resize: vertical;
}

<div contenteditable id="myInput"></div>

edited Mar 09 '23 at 21:16

answered Mar 09 '23 at 21:10

savageGoat

1,389
1
3
10

As i said before, this resolves the issue, but not the textarea one... i need a textarea, so i can make more lines, and they stay there. – Excorpion Mar 10 '23 at 14:33
@excorpion you mean `[CSS] white-space: pre-line;` ? – savageGoat Mar 10 '23 at 14:54
Yeah, now i need to investigate how to save it with break lines, thanks – Excorpion Mar 10 '23 at 15:00
You either accept `\n` or translate `
-> \n` or the other way around. It's standard practice to store the `\n` (to avoid html tags, and by extensions risks of injections) and either display it with `pre-line` or plain html by replacing them with `
` – savageGoat Mar 10 '23 at 15:02
How can i make that replace with jquery ? – Excorpion Mar 10 '23 at 15:25
@excorpion first replace `
`, something like `element.innerHTML = element.innerHTML.replace(/\
/g, "\n")`, then get the `textContent`, I belive it's `$(elemnt).text()` in jQuery? – savageGoat Mar 10 '23 at 17:52
If you mean to display the text, `text.replace(/\n/g, "
")` for html, and use CSS with plain `\n` – savageGoat Mar 10 '23 at 17:58

How do i resize a textarea, to content width, having min-width and max-width?

1 Answers1