Tengo un área de texto de expansión automática en el pie de página de la tarjeta. https://jsfiddle.net/6f9a52we/
En lugar de expandirlo hacia abajo, ¿puedo hacer que se expanda hacia arriba? Entonces, a medida que se expande hacia arriba, el cuerpo de la tarjeta debería encogerse. Como vemos en el chat de Gmail.
Intenté usar la posición: absoluta; y abajo: 0px; . En ese caso, la expansión hacia arriba funciona perfectamente, pero el área de texto en expansión cubre los textos en el cuerpo de la tarjeta debido a la posición absoluta. ¿Alguna idea, por favor, sin usar position:absolute ?
<html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="card"> <div class="card-body"> card body line 1<br> card body line 2<br> card body line 3<br> card body line 4<br> card body line 5 </div> <div class="card-footer"> <textarea id="myTextArea" placeholder="type here"></textarea> </div> </div> </body> </html> $(function() { $('#myTextArea').on('input keyup paste', function() { var $el = $(this), offset = $el.innerHeight() - $el.height(); if ($el.innerHeight() < this.scrollHeight) { // Grow the field if scroll height is smaller $el.height(this.scrollHeight - offset); } else { // Shrink the field and then re-set it to the scroll height in case it needs to shrink $el.height(1); $el.height(this.scrollHeight - offset); } }); }); .card{ text-align: center; width: 50%; margin:0 auto; } .card-body{ overflow-y: auto; height: 150px; }Agregue la altura máxima a su tarjeta de clase.
.card{ text-align: center; width: 50%; max-height: 250px; margin:0 auto; }