CODEWITHSUNDEEP
htmlreactjs
Djaenike
Djaenike

Reputation: 1865

Changing size of a textbox in html string in React

I'm using a popup library sweetalert2-react-content to generate a popup box which contains a textbox and a textarea. In the popupbox I am generating an html string to create the textbox and text area. It's generating those elements just fine, however I am unable to change the size of the textarea. Here's a code snippet:

import React, { Component } from 'react';
import Swal from 'sweetalert2';
import withReactContent from 'sweetalert2-react-content';

submitButton() {

    const MySwal = withReactContent(Swal)

    MySwal.fire({
        confirmButtonText: 'Submit Post',
        showCancelButton: true,
        title: "Submit a new Post",
        html:
            '<br /><br />' +
            '<h4>Enter the title</h4>' +
            '<input type="text" id="theTitle">' +
            '<h4>Enter the body</h4>' +
            '<textarea rows="10" cols="50"></textarea>',
        input: 'file',
        focusConfirm: false,
      }).then(result => this.getPostValues(result.value))
    }

Any ideas how I might be able to get the textbox to display a little larger? Thanks!!

Upvotes: 0

Views: 226

Answers (1)

Lifz
Lifz

Reputation: 688

The <textarea> is likely controlled via the library's css so even if you set rows and cols, the css dictates styling. If so, you'll have to either edit the library's css, override it with your own css, or give it an inline style.

MySwal.fire({
    // Other settings...
    html:
        '...other html' +
       '<textarea style="height: 200px; width: 400px"></textarea>'
});

Upvotes: 1

Related Questions