Akshay Lokur Akshay Lokur - 3 years ago 343
CSS Question

React Bootstrap adjust width of text inputs

I am trying to create a row something like shown below:

enter image description here

Below is my React component code for "Row":

/*
* The render method of this component
*/
render() {
return (
<form className="form-inline">
<FormGroup>
<InputGroup>
<InputGroup.Addon>
<input name="cb" type="checkbox" value={this.state.cb} onChange={this.handleInputChange} />
</InputGroup.Addon>
<div>
<FormControl name="remarks" type="text" value={this.state.remarks} onChange={this.handleInputChange} />
<FormControl name="amount" type="text" value={this.state.amount} onChange={this.handleInputChange} />
</div>
</InputGroup>
</FormGroup>
</form>
);
}
}


The problem is I want to increase the width of the "input text type" fields, however may be being not a CSS champ, I am not able to increase it. Asking here after quite some time of Googling and frustration :)

Anyone to help? Thanks

Answer Source

And yes I got the solution:

As described here:

May require custom widths: Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.

So, one has to give custom width to all elements to adjust their widths and hence I used following CSS:

.form-inline {
  width: 100%;
}

.form-group {
  width: 90%;
}

.input-group {
  width: 90% !important;
}

.form-control {
  width: 50% !important;
}

span.input-group-addon {
  width: 50px !important;
}

to achieve good looking width for my table:

enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download