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>