Tips for adjusting the number of rows in a textarea using Bootstrap

I currently have a textarea in my project that allows users to input text using Bootstrap. However, the height of the textarea is fixed at 3 rows by default. I want to make it dynamic so that as the user types beyond 3 rows, the textarea expands instead of showing a vertical scroll bar. I am aware that the textarea is responsive and can be resized by the user. But, I plan to implement a print feature where users can generate a PDF of their input, which is why the limited row setting is inconvenient.

Below is the code snippet:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <title>Index</title>
</head>

<body>
    <div class="container">
        <div class="container row text-center">
            <div class="container col bg-primary text-light"><span style="font-size: 5rem;">S</span></div>
        </div>
        <div class="container row text-center">
            <div class="container col bg-primary text-light"><span style="font-size: 2rem;">STRENGTHS</span></div>
        </div>
        <div class="container row text-center">
            <div class="container col bg-primary text-light"><span style="font-size: 2rem;">
                    <form>
                        <div class="form-group">
                            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                        </div>
                    </form>
                </span></div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/popperjs/dist/umd/popper.min.js"
        integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js"
        integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
        crossorigin="anonymous"></script>
</body>

</html>

javascripthtmlcssbootstrap-4

Answer №1

I believe this is the solution you're looking for:

$(document).ready(function () {
    $('textarea').on('input', function () { 
        this.style.height = 'auto'; 
        this.style.height = (this.scrollHeight) + 'px'; 
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<textarea autocomplete="off" style="resize:none; overflow:hidden;"></textarea>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Use a JavaScript function on identical IDs

Can someone please help me figure out how to hide multiple divs with the same id using JavaScript? I attempted the following: <script> function filterfunc() { if(document.getElementById('filter_deductible').value == 'id_50'){ ...

javascripthtml

The controller in AngularJS seems to be elusive and cannot be located

I've run into an issue while using angular-mock to inject my controller for unit testing. The error message I keep receiving is as follows: [$injector:unpr] Unknown provider: PatientRecordsControllerProvider <- PatientRecordsController This is h ...

javascriptangularjsunit-testing

Utilizing Paragraph Styles Within a CSS Stylesheet

I'm attempting to create two unique styles for a pair of paragraphs in an xhtml document by utilizing a CSS style sheet. Despite my efforts and extensive search, I have yet to find a clear solution. ...

cssxhtmlstylesheet

Passing refs from child components to parent components in React v16 using a wrapper component

I have a current component hierarchy that is structured like this: const Parent = props => { const divElement = useRef() // handle divElement logic return <Child ref={divElement} {...some props} /> } const Child = React.forwardRef((props, r ...

javascriptreactjsrefreact-forwardref

Position a table with a fixed center

Hi everyone, I'm struggling to center a table in a fixed position on a webpage. Can anyone help me figure out how to do this? Here is what I have tried so far... http://pastebin.com/cjAqkyjg ...

csshtml

Utilizing Bootstrap to emphasize the selected navbar item by adding the active class upon

I was attempting to emphasize the clicked navbar by adding an active class. This is the code I tested: <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> < ...

htmlcssbootstrap-4

Is it possible to create a replicating text box in AngularJS that multiplies when entering input

I am experimenting with creating a sequence of text boxes that dynamically generate new empty text boxes as the user enters information into each one. Each text box is required to have an ng-model value associated with it, and they should all be generated ...

javascripthtmlangularjs

Prevent a JavaScript file from resetting when a user refreshes the page

I'm currently developing a desktop application using node.js and electron. My task involves creating a JavaScript file that manages multiple processes, stores them in a dictionary, and ensures that the dictionary content is retained even without any r ...

javascriptnode.jselectron

What is the correct way to load a column of images without affecting the readability of the text alongside them? (see image below)

https://i.stack.imgur.com/rBL50.png Whenever my page loads, there is a card with a vertical list of images. Due to the loading time of the images, the text appears first and gets squished as shown in the provided screenshot. Is there a way for the text to ...

phphtmlcss

What is the best way to apply toggle function to reveal hidden elements?

Imagine you have an HTML page with a button on it. When the button is clicked, a toggle appears containing another button: (Code inside the toggle) <button id="new">New</button> You try to remove this button using jQuery: $('#new' ...

javascriptjqueryhtmltoggle

Eliminate the space both above and below the <a> element

I am facing a situation where a <div> is nested inside a table, occupying the entire space of its parent <td> Within this <div>, there lies a single <a> element My objective is to have these <a> elements expand to 100% width ...

htmlcss

Supervise the interaction of users on the Express application

Recently, I began using Express and encountered a situation where I have a <table> on the users page with a link in each row to delete the entry. Whenever a user clicks on one of these links, I need to delete that entry from the database. Since this ...

htmlnode.jsajaxexpressurl-routing

Why is my nested React Router component failing to load upon page refresh?

Lately, I have been delving into learning react and for the past few weeks. However, I've encountered an issue where when I try to reload the page using the browser's reload button, instead of reloading the component, it simply disappears (turnin ...

javascriptreactjsreduxreact-router

Comparing the benefits of expanding/collapsing all to focusing on individual items

Encountering an issue with expanding and collapsing a menu. The goal is to achieve two functionalities: First, to expand or collapse all items in the menu. The current implementation seems to be working correctly with the following code: $("#expandAll dt ...

javascriptjqueryhtml

Retrieve data from an HTML table with the power of jQuery

I have a table with the following structure. <form id="myform"> <table> <tr><th>TEST</th> <th>VALUES</th> <th>UNIT</th> <tr><td>Abc</td><td><input type="text" & ...

jqueryhtml

Creating an Angular table using reactive forms: a step-by-step guide

After reviewing the HTML snippet provided below, it is evident that there is a table with looping through mat cell using *matCellDef="let model". Inside each cell, there are input fields which are reactive forms. Each row or cell needs to have it ...

javascriptangulartypescriptangular-material

Capturing authorization issues in Firebase using ngrx effects

I am currently working on an angular5/firebase/ngrx project and I'm encountering an issue when trying to handle errors during the signup process. When I attempt to submit the signup form with an email that already exists in the system, I receive the ...

javascriptangularfirebasefirebase-authenticationngrx

What is the best way to align vertically a horizontal list that includes both headers and icon images?

My goal is to create a horizontal navigation bar that features menu options with headings and icons below them. Upon hovering over each option, the block's background color should change and slightly increase in size. I initially used percentages for ...

htmlcss

Explore and choose JSON data for specific items depending on an array of criteria

I need to extract specific objects from a JSON file by matching them with values stored in an array. To illustrate, I have an array var list = ['test1', 'test2']; and there is a variable containing the following data: var data = [ ...

javascripthtmlarraysjsonobject

Can two text boxes trigger the resetting of a global variable with the same event?

I have encountered an issue with two text boxes and a label in my code. Both text boxes share a common event handler that is designed to work for any text box. The problem arises when I attempt to add the values from both text boxes to a global variable - ...

c#htmlasp.netwebforms