screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Auto Resize Textarea</title> <!-- Include the latest Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Include the latest Bootstrap JS and Popper.js --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <!-- Include jQuery (optional, but used in the example) --> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> </head> <body> <div class="container mt-5"> <h3>Bootstrap Textarea Height Auto Resize </h3> <div class="form-group"> <label for="exampleTextarea">Example Textarea</label> <textarea class="form-control" id="exampleTextarea" rows="1"></textarea> </div> </div> <!-- Custom script for auto-resizing textarea --> <script> // Use jQuery to select the textarea by ID $(document).ready(function(){ $('#exampleTextarea').on('input', function () { this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px'; }); }); </script> </body> </html>