I am looking to have three rows of input text area comments instead of just one

Utilizing Bootstrap 4.3.1 with React Components I currently have this image: https://i.sstatic.net/rudsE.png

And I am aiming for this design: https://i.sstatic.net/VmyTW.png

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")
    },

Attempted the above changes in comments but no success so far.

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

This is also the scenario of my input component where textarea is being rendered.

 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 adding external SCSS but still no improvement, what should be the next step?

Answer №1

If you prefer not to utilize the textarea element, you can achieve a similar effect using CSS to adjust the input element's width and height.

It is recommended to reserve the use of textarea for specific scenarios. In React, consider passing rows and cols as shown below:

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

However, note that this method does not support text wrapping to a new line.

Thank you

Answer №2

Could you please explain why you have opted for the input element instead of using a textarea? I am curious about your choice.

Answer №3

When dealing with multiple lines of input, my suggestion would be to utilize the following approach:

<textarea cols="50" rows="3">Something similar to this &#13;&#10;to cater for&#13;&#10;various lines</textarea>

Answer №4

To attain the desired functionality, consider utilizing a textarea as shown below:

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

Tips for updating and transferring a variable within a callback function

I have implemented a function using the SoundCloud API that retrieves a song URL, obtains the associated sound ID from the API, and then passes that ID to a callback for streaming purposes and updating the page. The data is successfully retrieved from the ...

Active tab in HTML

In my implementation based on this example code from https://www.w3schools.com/howto/howto_js_tabs.asp, I have a specific requirement. I want the tab for "Paris" to remain active even after the page is refreshed if the user has clicked on the button for "P ...

Can one extract request data from an rxjs-timeout-error?

Currently, I am working on enhancing our error handling system, particularly in providing better descriptions of errors in both general and testing environments. My focus is on an Ionic app, but I am facing challenges with the rxjs timeout method. One asp ...

What is the best way to arrange this object alphabetically by name using Angular?

My client is in need of an AngularJS application that will interact with an API from an existing app. The API returns JSON data structured like the following: { "groups":{ "60":{ "name":"History" }, "74":{ "n ...

The tooltip feature in jQuery is experiencing some stuttering issues

Sometimes, images can convey messages better than words. I encountered a strange issue with my self-made jQuery tooltip. I prefer not to use any libraries because my needs are simple and I don't want unnecessary bloat. When I move my mouse from righ ...

How to retrieve the value instead of the key/ID in a Laravel controller?

I am extracting data from the database and displaying it on the invoice view page using the json_encode($items); function. When I try to insert the 'price' field into the database, only the id/key is being stored instead of the actual value. Any ...

Align a div to the bottom of a column using Bootstrap 4 - Vertical Alignment

I'm working on a layout with two columns - one on the left and two on the right. How can I ensure that the last element in the right column aligns with the bottom of the left column? <!DOCTYPE html> <html lang="en> ... (Bootstrap core ...

Guide to Subscribing to a nested observable with mergeMap within a button's click event

The issue arises in the "addToWishlist" function as I attempt to concatenate the result of the outer observable with the inner observable array and then call the next method on the inner observable. The "addToWishlist" method is triggered by the click ha ...

Leveraging the power of a local environment to conduct sanity checks on

Encountered an error: Uncaught error: Can't find variable: process http://localhost:3333/sanity.config.ts:5:26 The issue lies within the .env.local file. I discovered this when manually inputting my project ID into the sanity config file. Howeve ...

In search of a solution to ensure equal width for all items in a 2x2 grid

I have a CSS grid with two rows and two columns (refer to the code snippet). Is there a way to make all the items in the grid maintain the same width without specifying it individually? Are there any css-grid properties that can ensure consistent widths ...

Problems with the firing of the 'deviceready' event listener in the PhoneGap application

Utilizing vs2012, I have been working on a PhoneGap application. Within this application, the following JavaScript code is being used: document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { // alert("hh") ...

Tips on preventing duplication of APIs when retrieving data using nextjs

In my code, I have a function that can be called either from server-side rendering or client side: export const getData = async (): Promise<any> => { const response = await fetch(`/data`, { method: 'GET', headers: CONTENT_TYPE_ ...

How can I pass a variable name as an argument in Vue?

I am exploring ways to create a method that can efficiently load and assign JSON files to dynamic variables. Despite my efforts, varA and varB are not being populated as expected: data() { return { varA: Array, varB: Array } }, ...

looking to save a service or factory as a variable

I seem to be at a standstill when it comes to finding a solution for my mvc.NET / angularjs project. So far, I believe I've done a good job abstracting the view to use a controller that matches the type name of the specific controller.cs class: < ...

Troubleshooting: Bootstrap interfering with external CSS file and causing errors

Attempting to utilize Bootstrap for the design of my website, I encountered an issue when trying to implement an external CSS file named "mycss.css". Unfortunately, it seems to not be functioning properly at all. Both the file, "mycss.css" and index.php ar ...

BS grid malfunctioning in a non-uniform manner

When a division in the advantage grid is clicked, the card body of another division collapses. However, this does not occur in the disadvantage grid. Clicking on one section in the disadvantage grid does not collapse another section as it does in the advan ...

I am experiencing issues with local storage getItem() function not functioning properly within NUXT JS

Currently working on creating a shopping cart using nuxt js. Successfully able to store the cart data in local storage, but facing difficulty in retrieving the data. Refer to the screenshots for more details: https://i.sstatic.net/X7dL9.png https://i.sstat ...

How can I access the value of an HTML attribute using a v-on:click event within an anchor tag in Vue.js?

In my Vue.js and Laravel app, I am trying to access the value of the 'h5' attribute which is {{$subcategory->name}}. This will allow me to perform additional actions within my application. <div class="container" id = "showProd"> < ...

``I am unable to finish running the npm create-react-app command

I encountered an issue with npm create-react-app where it would get stuck at 0 vulnerabilities found and not progress any further. I had to use Ctrl+C to exit the process as it did not show any success message. Here is a snippet for reference: $ npx cre ...

I'm curious if there is a method to modify layouts in NextJS 14

In my NextJS 13/14 app, I have a standard setup where I use a layout.tsx file to display a sticky navbar for navigation: import "./globals.css"; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) ...