I have an auto expanding text area on card-footer. https://jsfiddle.net/6f9a52we/
Instead of expanding it downwards, Can i make it expand upwards? So as it expands upwards, the card-body should shrink. As we see in Gmail chat.
I tried using position: absolute; and bottom:0px;. In that case, Expanding upwards is working perfectly, But the expanding text-area is covering the texts in card-body due to absolute position. Any Ideas please without using position:absolute ?
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card">
<div class="card-body">
card body line 1<br>
card body line 2<br>
card body line 3<br>
card body line 4<br>
card body line 5
</div>
<div class="card-footer">
<textarea id="myTextArea" placeholder="type here"></textarea>
</div>
</div>
</body>
</html>
$(function() {
$('#myTextArea').on('input keyup paste', function() {
var $el = $(this),
offset = $el.innerHeight() - $el.height();
if ($el.innerHeight() < this.scrollHeight) {
// Grow the field if scroll height is smaller
$el.height(this.scrollHeight - offset);
} else {
// Shrink the field and then re-set it to the scroll height in case it needs to shrink
$el.height(1);
$el.height(this.scrollHeight - offset);
}
});
});
.card{
text-align: center;
width: 50%;
margin:0 auto;
}
.card-body{
overflow-y: auto;
height: 150px;
}
Add max height to your class card.
.card{
text-align: center;
width: 50%;
max-height: 250px;
margin:0 auto;
}