Como principiante en una reacción, tengo un problema al alinear un campo de selección y tres campos de formulario de entrada en una fila en línea y envolver los campos superiores dentro de la tabla que tiene la misma longitud de campo de entrada y parece una tabla.
código
<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>Necesita un sistema de cuadrícula, por ejemplo, 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>Con algo de estilo, es:
input, select { width:100%; }Si publica su código, puede obtener una mejor ayuda.
Simplemente podría usar flexbox ( cheatsheet ) para el sistema de cuadrícula.
Solo hay unas pocas propiedades con las que puedes jugar. Los útiles para ti en mi opinión:
Por ejemplo :
<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>Con este scss
.container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; .row { display: flex; flex-direction: row; input { flex-grow: 1; } }}
Y si quieres aprender este sistema de cuadrícula jugando unos minutos: Flexbox froggy .
Para el componente de selección, si está utilizando (por ejemplo, digamos) react-select wrappred en un controlador de forma de gancho de reacción, puede agregar una propiedad de estilo que especifique la altura. De esta manera, todo está alineado.