As a Begineer in a react, I am having a problem in aligning a select field and three input form fields in an inline row and wrapping above fields inside table having equal inputs field length and it looks like a table?
code
<div className="row">
<div className="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<select
value={values}
>
</select>
</div>
<div className="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<input
type="text"
value={name}
/>
</div>
<div className="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<input
type="number"
value={number}
/>
</div>
//delete icon from materail-icons
<Controls.ActionButton
color="secondary"
onhover="open"
>
<DeleteIcon fontSize="small" />
</Controls.ActionButton>
</div>
i want to wrap above input field into these table:
//material tables
<TableContainer>
<Table stickyHeader>
<TableHead>
<TableRow>
<TableCell>CollegeName</TableCell>
<TableCell>name</TableCell>
<TableCell>number</TableCell>
<TableCell>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
You need a grid-system, e.g. react-bootstrap
Es:
<Container>
<Row>
<Col>1 of 2</Col><Col>1 of 2</Col>
</Row>
<Row>
<Col>1 of 2</Col><Col>1 of 2</Col>
</Row>
</Container>
With some style, es:
input, select { width:100%; }
If you post your code you can obtain a better help.
You could just use flexbox (cheatsheet) for the grid system.
There's only a few properties you can play with. The ones useful for you in my opinion :
For example :
<div className="container">
<div className="row">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div className="row">
<input type="text" />
<input type="text" />
</div>
</div>
With this scss
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
.row {
display: flex;
flex-direction: row;
input {
flex-grow: 1;
}
}
}
And if you want to learn this grid system by playing a few minutes : Flexbox froggy.
For the select component, if you're using (for example let's say) react-select wrappred in a react-hook-form controller, then you can just add a style property that specifies the height. This way, everything is aligned.