CODEWITHSUNDEEP
htmlcss
JoannaFalkowska
JoannaFalkowska

Reputation: 3677

Textarea doesn't make its parent higher

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.

Upvotes: 0

Views: 99

Answers (4)

Cornest
Cornest

Reputation: 269

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'));

Upvotes: 0

user5908212
user5908212

Reputation:

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>

Upvotes: 0

Ronald
Ronald

Reputation: 322

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

Upvotes: 1

Justinas
Justinas

Reputation: 43479

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).

Upvotes: 1

Related Questions