Want 3 rows in my input text area comments instead of one

auto resize textarea to fit content
how to display html content in textarea using javascript
textarea resize
textarea height auto
textarea wrap
textarea css
textarea value
textarea maxlength

Using Bootstrap 4.3.1 with react Currently, I have this

And I want to achieve this

comments: {
        elementLabel: "Comments",
        elementType: 'textarea',
        elementConfig: {
            placeholder: '',
            name: "comments",
            id: "comments",
            rows: 4
        },
        value: '',
        form_value: "",
        validation: {
        },
        valid: false,
        touched: false,
        isChanged: false,
        errorMessage: "",
        className: "form-control",
        changed: (event) => this.inputChangedHandler(event, "comments"),
        blured: (event) => this.inputBlurHandler(event, "comments")
    },

Tried using above change in commnets but doesnot helps

<div className="form-row mb-3">
                                    <div className="col-md-12">
                                            <Input
                                                {...this.state.comments}
                                            />  </div>
                                </div>

Also this is the case of My input component where textarea is getting render.

 case ('textarea'):
        inputElement = (
            <React.Fragment>
                <label>{ReactHtmlParser(props.elementLabel)}</label>
                <textarea
                    {...props.elementConfig}
                    className={inputClass}
                    value={props.value}
                    onChange={props.changed}
                    onBlur={props.blured}
                />
                {
                    invalidClass || props.allowed_characters
                        ?
                        <div className="form-row">
                            <div className={`col-md-10  text-left`}>
                                {invalidClass ? <span className="invalid-feedback">{props.errorMessage}</span> : null}
                            </div>
                            <div className="col-md-2 text-right">
                                {
                                    props.allowed_characters ?
                                        <span className="allowed_characters">{props.current_character_count} / {props.allowed_characters}</span>
                                        : null
                                }
                            </div>
                        </div>
                        :
                        null
                }

            </React.Fragment>
        )

Tried passing external scss but that does not help, what to do now?

I want to know if there is any reason you are not using textarea, because I see that you are using input element.

<textarea>, The HTML textarea element represents a multi-line plain-text editing control, amount of free-form text, for example a comment on a review or feedback form. 3. <textarea id="story" name="story". 4. rows="5" cols="33">. 5 An id attribute to allow the <textarea> to be associated with a <label> element for  Definition and Usage . The rows attribute specifies the visible height of a text area, in lines. Note: The size of a textarea can also be specified by the CSS height and width properties.

For multiple line input I think you should just use

<textarea cols="50" rows="3">Somethine like this &#13;&#10;for&#13;&#10;different lines</textarea>

HTML5 Textarea Attributes: Here's What You Should Know », The <textarea> element is used to create a text input area of unlimited length. 3 HTML5 Textarea Attributes; 4 Attributes in Action; 5 Attributes of HTML5 <​textarea placeholder="You can type into this textarea all day long if you'd like to, but a handful of input elements (at least one of which will be of the submit type), and  Definition and Usage. The <textarea> tag defines a multi-line text input control. The <textarea> element is often used in a form, to collect user inputs like comments or reviews. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier). The size of a text area is specified by the <cols> and <rows> attributes (or with CSS).

You should be able to achieve desired functionality by using textarea in the following way :

Textarea Tricks, If you want to be able to type into textareas and would rather lines do not break until you press return/enter (a horizontal scrollbar is triggered instead), you'll have  One problem I’m having though is that I cannot get text to start at the top of a text-area box. I’ve tried: vertical-align: top !important; text-align: start; But this has no effect. Even tried removing ‘vertical-align: middle’ from the overall input field and changing to top but the text still appears in the middle of the area.

If you are not willing to use the textarea you can use the CSS to make the input element width and height like text area.

A good practice is to use textarea only for such cases. In React try to pass rows and cols like this:

<textarea rows={4} cols={8} />

PS: but that will not give the feature of wrapping the text to the new line.

Thank you

HTML textarea tag, The <textarea> element is often used in a form, to collect user inputs like comments or reviews. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier). The size of a text area is specified by the <cols> and <rows> attributes (or with CSS). The name attribute is  Drag fields to the Rows and Columns of the pivot table. Start building the pivot table; To add the text to the values area, you have to create a new special kind of calculated field called a Measure. Look at the top of the Pivot Table Fields list for the table name. Right-click the table name and choose Add Measure.

HTML textarea rows Attribute, The rows attribute specifies the visible height of a text area, in lines. Note: The size of a textarea can also be specified by the CSS height and width properties. Select a text entry area, right-click, select "Format Cells," click the "Protection" tab and uncheck the box next to "Locked." This will unlock only the text entry area. If you don't want to do

How to Create a Multi-line Text Input (Text Area) In HTML?, To create a multi-line text input, use the HTML tag. You can set the size of a text area using the cols and rows attributes. Specifies one or more forms. <title>​HTML textarea Tag</title> </head> <body> <form action = "/cgi-bin/hello_get.cgi" method = "get"> What improvements you want in College? To create a multi-line text input, use the HTML <textarea> tag. You can set the size of a text area using the cols and rows attributes. It is used within a form, to allow users to input text over multiple rows. Here are the attributes of <textarea> tag −

7 Ways To Enhance The HTML TextArea Element 👩‍💻👨‍💻, The HTML Textarea element allows users to enter multiline values to online forms Common examples include comments, descriptions and content When you need to collect more than one line of text and or large free-form text, the cols (columns) and rows values to control the textarea's rendered size  If you need to obtain only one line of input from the user, you should use a text field. If you want the text area to display its text using multiple fonts or other styles, you should use an editor pane or text pane. If the displayed text has a limited length and is never edited by the user, use a label.

Comments
  • because of the reason that we are using input only for that
  • Unfortunately, you cannot do it with input element, as suggested by @Michael, you will have to use <textarea /> can you create codesandbox or codepen so we can help you with it.
  • updated the question, Added Input component case where this getting render
  • Which framework are you using for react for Bootstrap?
  • @Farhan Not quite getting the question, perhaps a sandbox will help alot
  • I tried but didn't work on my solution, passes rows: 4 did not work
  • @Farhan Your title says you want 3 rows, but even if you want 4 rows it stills works <textarea cols="50" rows="4">Somethine like this &#13;&#10;for&#13;&#10;different lines&#13;&#10;and another one</textarea>
  • please check my updated question
  • He is trying to achieve it in react with some framework, I think
  • @Farhan send 4 as string like this "4"
  • Please check what @Mohit suggested may be that could help!
  • Hi @Farhan, here is the working code: codesandbox.io/s/sad-wind-winy5, I have created a textarea with 3 rows with minimum functionality from your sandbox.