CODEWITHSUNDEEP
reactjsmaterial-uitextfield
Alligator
Alligator

Reputation: 290

how to expand TextField to full width in the grid container?

The TextField component is not drawn to full width while the Paper component is drawn to full width. Does somebody have any idea?

<Grid container spacing={2} className={classes.grid}>
  <Grid item xs={12} md={6}>
    <TextField id="outlined-basic" label="Outlined" variant="outlined" />
  </Grid>

  <Grid item xs={12} md={6}>
    <Paper className={classes.paper}>2</Paper>
  </Grid>

  <Grid item xs={4}>
    <Paper className={classes.paper}>6</Paper>
  </Grid>

  <Grid item xs={4}>
    <Paper className={classes.paper}>7</Paper>
  </Grid>

  <Grid item xs={4}>
    <Paper className={classes.paper}>8</Paper>
  </Grid>
</Grid>

Upvotes: 8

Views: 8701

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81410

Set fullWidth to true in your TextField. You can see all Input props here for more reference.

<Grid item xs={12} md={6}>
  <TextField
    fullWidth
    id="outlined-basic"
    label="Outlined"
    variant="outlined"
  />
</Grid>

Live Demo

Edit 64215994/how-to-fit-text-field-elements-into-the-grid-container-using-material-ui

Upvotes: 11

Related Questions