How do I resize the width of <Input> element in Reactstrap?

Question

I want to make a input element width shorter using Reactstrap, how do I do it?

I've tried setting bsSize to small and it still doesn't work

    <InputGroup>
      <Input
        type="text"
        name="searchTxt"
        value={props.searchText}
        onChange={props.updateSearchText}
        placeholder="Type keyword here..."
        size="md"
        bsSize="small"
      ></Input>
      <Button
        color="secondary"
        onClick={() => props.getSearchResult(props.searchText)}
      >
        <MdSearch />
      </Button>
    </InputGroup>

This takes all the remaining space in Navbar, I wanted it just to take small amount of space.

brooksrelyt · Accepted Answer · 2019-10-28 22:40:07Z

2

ReactStrap uses Bootstrap 4. So I think you can just use the inherent width utilities such as w-25, w-50, or w-75.

Example of Bootstrap 4 width utilities

If that doesn't do the exact width that you like, you could always use either a custom CSS class to specify the width, or better yet place your Input inside the Bootstrap grid using Rows and Columns.

Examples of using the Row and Col classes

edited Oct 28, 2019 at 22:40

brooksrelyt

4,0536 gold badges37 silver badges58 bronze badges

answered Oct 23, 2019 at 15:20

dyouberg

2,3521 gold badge15 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lawraoke Over a year ago

It work for me, code example: <Input className="w-25" type="text" placeholder="Enter Name" />

superup · Accepted Answer · 2021-04-14 13:00:15Z

First Import

import {Button, Form, FormGroup, Label, Input, FormText, Col, Row, Card, CardBody, Table, CardHeader,
InputGroup, InputGroupAddon, InputGroupText,} from 'reactstrap';

Add row to Tag FormGroup example

  <FormGroup row>
     <Col sm={2}></Col>
         <Col sm={8}>
               <InputGroup>
                   <Input type="select" name="select" id="selected">
                       <option>1. เลขที่บัตรประชาชน</option>
                       <option>2. ชื่อ</option>
                       <option>3. นามสกุล</option>
                       <option>4. ที่อยู่</option>
                       <option>5. คนที่ยังไม่จ่ายเงิน</option>
                   </Input>
                   <InputGroupAddon addonType="append">
                       <InputGroupText>@เลือกสิ่งที่จะค้นหา</InputGroupText>
                   </InputGroupAddon>
               </InputGroup>
         </Col>
     <Col sm={2}></Col>
  </FormGroup>

And this result

Collectives™ on Stack Overflow

How do I resize the width of <Input> element in Reactstrap?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related