0

When I put multiple lines inside textarea, it doesn't make its parent higher, but gains a scrollbar (so not like a typical div). I guess this is default behavior but I'd like to have it resize parent instead. Parent has some initial height but should be able to become higher (think multiline chat input).

Code:

<div class="parent">
  <textarea></textarea>
  <div class="other"></div>
<div>


.parent {
  position: absolute;
  bottom: 0
  height: auto;
}
textarea {
  min-height: 52px
  height: auto
}
.other {
  height: 52px
}

Wrapping textarea in another div doesn't change anything.

JoannaFalkowska
  • 2,771
  • 20
  • 37
  • Possible duplicate of [Creating a textarea with auto-resize](http://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize) – Vucko Apr 20 '16 at 11:02

4 Answers4

1

Yes, it's default behavior for textarea to stay same height.

You can use some plugin like autogrow.js to increase textarea height (together increasing parent height).

Justinas
  • 41,402
  • 5
  • 66
  • 96
1

I've done this before by using this jQuery library, unfortunately there's no way doing this in pure CSS.

http://www.jacklmoore.com/autosize

Ronald
  • 296
  • 2
  • 9
0

Try this..! Might help

<textarea style="overflow:auto"></textarea>

Or

<textarea style="overflow:hidden"></textarea>

Or

<textarea style="resize:none"></textarea>

Else try this.!

code.css

div {
  width: 150px;
  height: 150px;
  border-style: solid;
  border-width: thin;
  font-family: sans-serif;
  float: left;
  margin-right: 10px;
  overflow: auto;
}
.of_none {
  -ms-overflow-style: none;
}
.of_scrollbar {
  -ms-overflow-style: scrollbar;
}

code.html

<body>
  <div class="of_none">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="of_scrollbar">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</body>
0

You can do it with Autosize of Jacklmoore.

You can find the documentation on the following website: Autosize by Jacklmoore

Usage:

// from a jQuery collection
autosize($('textarea'));
Cornest
  • 269
  • 1
  • 15