I'm using Material-UI in a React 16.10 application. I want to display a table with an icon in the left column and then a label and address, stacked on top of each other in the right column. I want the items in the right column to take up 100% of the available space. So I have this class
fullWidth: {
backgroundColor: "red",
width: "100%",
},
(the background color was just so I could see what was going on). I created this table ...
<Grid container direction="row" alignItems="top" spacing={1} className={classes.fullWidth}>
<Grid item>
<LocationOnIcon />
</Grid>
<Grid item>
<Grid container direction="column" alignItems="center">
<Grid item className={classes.fullWidth} style={{backgroundColor: "yellow"}}>
<TextField
className={`${classes.rootInput} ${classes.input}`}
id="pickupLocationLabel"
value={values.pickUpLocationLabel}
placeholder="Label"
variant="outlined"
disabled={false}
onChange={handleChangePickUpLocationLabel}
fullWidth
/>
</Grid>
<Grid item className={classes.fullWidth}>
<AddressInput
className={classes.textField}
placeholder={values.pickUpLocation?.address}
stage={values.pickUpLocation}
setStage={handleChangeLocation.bind(null, "pickUpLocation")}
setLocation={handleChangeLocation}
/>
</Grid>
</Grid>
</Grid>
</Grid>
However, the items didn't take up 100% of the available width ...
When I added the fullWidth class to the parent container,
<Grid container direction="row" alignItems="top" spacing={1} className={classes.fullWidth}>
<Grid item>
<LocationOnIcon />
</Grid>
<Grid item className={classes.fullWidth}>
<Grid container direction="column" alignItems="center">
<Grid item className={classes.fullWidth} style={{backgroundColor: "yellow"}}>
<TextField
className={`${classes.rootInput} ${classes.input}`}
id="pickupLocationLabel"
value={values.pickUpLocationLabel}
placeholder="Label"
variant="outlined"
disabled={false}
onChange={handleChangePickUpLocationLabel}
fullWidth
/>
</Grid>
<Grid item className={classes.fullWidth}>
<AddressInput
className={classes.textField}
placeholder={values.pickUpLocation?.address}
stage={values.pickUpLocation}
setStage={handleChangeLocation.bind(null, "pickUpLocation")}
setLocation={handleChangeLocation}
/>
</Grid>
</Grid>
</Grid>
</Grid>
Then the items no longer lined up alongside the icon.
How do I adjust things to that they take up 100% of the available width without wrapping to the next row?