I am using textarea where we can type whatever we want, using Bootstrap.
But, it's height is set to 3 rows by default. I wanna make it flexible. As the user goes beyond 3 rows, I want the text area to expand. Instead a scroll bar appears. I know, the text area is responsive, the user can drag and resize it. But, I a, going to add a print option where the user can get a pdf of what they have typed. So, the limited row feature is a hindrance.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>Index</title>
</head>
<body>
<div class="container">
<div class="container row text-center">
<div class="container col bg-primary text-light"><span style="font-size: 5rem;">S</span></div>
</div>
<div class="container row text-center">
<div class="container col bg-primary text-light"><span style="font-size: 2rem;">STRENGTHS</span></div>
</div>
<div class="container row text-center">
<div class="container col bg-primary text-light"><span style="font-size: 2rem;">
<form>
<div class="form-group">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
</span></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
crossorigin="anonymous"></script>
</body>
</html>I think that's what you need:
$(document).ready(function () {
$('textarea').on('input', function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<textarea autocomplete="off" style="resize:none; overflow:hidden;"></textarea>