I'm creating a form where I'm pulling some data from my company DB, but the fields are not aligning in one line. The original code was using a custom image for to delete the fields, but it never sat inline. I tried to create a new version where 4 fields would be inline with the delete button. This is what I have so far.
import React from "react";
import ReactDOM from "react-dom";
import Grid from "@material-ui/core/Grid";
import TextField from "@material-ui/core/TextField";
import DeleteIcon from "@material-ui/icons/Delete";
import IconButton from "@material-ui/core/IconButton";
import { makeStyles } from "@material-ui/core/styles";
import "./styles.css";
const useStyles = makeStyles(theme => ({
button: {
margin: theme.spacing(1)
}
}));
function App() {
const classes = useStyles();
return (
<>
<div>This Grid is always auto-layout.</div>
<Grid container spacing={10}>
{/* {[1, 2, 3, 4, 5, 6, 7].map(() => ( */}
<Grid item form="maincomponent" xs>
<TextField required label="true" type="number" />
<TextField required label="true" type="number" />
<TextField required label="true" type="number" />
<TextField required label="true" type="number" />
<IconButton
color="secondary"
className={classes.button}
aria-label="delete"
>
<DeleteIcon />
</IconButton>
</Grid>
{/* ))} */}
</Grid>
{/* <br />
<br />
<Grid container spacing={24}>
{[1, 2, 3, 4, 5, 6, 7].map(() => (
<Grid item xs={4} sm={3} md>
<TextField required label="4/3/true" type="number" />
</Grid>
))}
</Grid> */}
</>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>I picked this from a tutorial, and modified it as per my needs. So far, I have tried to manipulate the original code (can't post here since its company code) using the following grid props: alignContent, alignItems, justify and justifyContent. When I was not able to achieve the effect that I wanted, I tried manipulating sm and xs in the Field Tag from material-ui. I don't really understand these very well (first job) and would appreciate any direction. I've read the API, and unfortunately it gives the same description for the double-alphabet attribute [lg,md,sm,xl,xs].
Appreciate any help!
I have tried working the code on CodeSandbox.