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>