Skip to content
Advertisement

Align input to the auto-height increase textarea

In my code, the other inputs are aligned at the center of the textarea as i type long text. What I want is to align the input boxes at the top of the textarea while the textarea is expanding downward.

What i want example: enter image description here

var textarea = document.getElementById("textarea");
//var limit = 80; //height limit

textarea.oninput = function() {
  textarea.style.height = "";
  textarea.style.height = Math.min(textarea.scrollHeight) + "px";
};
textarea {
    width: 100%;
}
<table>
<tr>
  <td><input></td>
  <td><textarea id="textarea"></textarea></td>
  <td><input></td>
</tr>
</table>

Advertisement

Answer

just align the td‘s to the top as shown below.

var textarea = document.getElementById("textarea");
//var limit = 80; //height limit

textarea.oninput = function() {
  textarea.style.height = "";
  textarea.style.height = Math.min(textarea.scrollHeight) + "px";
};
textarea {
    width: 100%;
}

table td {
    vertical-align: top;
}
<table>
<tr>
  <td><input></td>
  <td><textarea id="textarea"></textarea></td>
  <td><input></td>
</tr>
</table>
Advertisement