CODEWITHSUNDEEP
cssreactjstwitter-bootstrapreactstrap
Kex
Kex

Reputation: 8629

Can't set height of textarea in reactstrap card

I'm using reactstrap in my project I have a simple card and I want to place a text area inside it using the following code:

<Card>
    <CardBody>
        <Form>
            <FormGroup>
                <Input
                    type="textarea"
                    defaultValue="Hello world"
                />
            </FormGroup>
        </Form>
    </CardBody>
</Card>

If I then try to set the height it just doesn't work. I have tried using style:

<Card>
    <CardBody>
        <Form>
            <FormGroup>
                <Input
                    type="textarea"
                    defaultValue={tweet.full_text}
                    style={{ height: 220 }}
                />
            </FormGroup>
        </Form>
    </CardBody>
</Card>

And also tried using a custom css class:

.text-area-custom {
  height: 220px;
}

<Card>
    <CardBody>
        <Form>
            <FormGroup>
                <Input
                    className="text-area-custom"
                    type="textarea"
                    defaultValue={tweet.full_text}
                />
            </FormGroup>
        </Form>
    </CardBody>
</Card>

Neither of these methods work. Any idea what I am doing wrong here?

Upvotes: 3

Views: 5580

Answers (1)

surgentt
surgentt

Reputation: 406

Try and set the rows attribute

<Card>
    <CardBody>
        <Form>
            <FormGroup>
                <Input
                    type="textarea"
                    defaultValue={tweet.full_text}
                    rows="5"
                />
            </FormGroup>
        </Form>
    </CardBody>
</Card>

Upvotes: 2

Related Questions