My challenge involves a textarea that dynamically expands as content is added to it. The structure of the textarea within a div element is illustrated below:
<div id='sendMes' class='container-fluid'>
<form action='#' method='POST'>
<textarea onkeyup='auto_grow(this)' id='textarea' cols='50' name='msg_body' placeholder='Type a message...'></textarea>
<button id='post' type='submit' name='submit'><i class='fa fa-send'></i></button>
</form>
</div>
The script for handling the onkeyup event can be seen below:
function auto_grow(element) {
element.style.height = "5px";
element.style.height = (element.scrollHeight)+"px";
}
In the HTML code provided, the div with the ID sendMes is positioned above another div with the ID messageThread. This second div is structured as follows:
<div class="container-fluid" id="messageThread">
</div>
Currently, as the sendMes div expands vertically, it overlaps the contents of the messageThread div. I am seeking assistance in creating a JavaScript function that will adjust the height of messageThread when sendMes expands, and vice versa.