CODEWITHSUNDEEP
cssreactjsmaterial-design
Lara
Lara

Reputation: 3021

How to increase the width of Material UI dropdown

I am using Material UI dropdown in ReactJs and need to increase the width of the same. Tried to provide properties like style={{minWidth:300}} but its not increasing the width. Below is my code 

 <form  className={classes.root} autoComplete="off">
  <TextField
    select
    variant="outlined"
    value={values.age}
    onChange={handleChange}
    inputProps={{ name: "age", id: "outlined-age-simple" }}
  >
    <MenuItem value="">
      <em>None</em>
    </MenuItem>
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </TextField>
</form>

and here is link of codeSandbox https://codesandbox.io/s/material-demo-t4cvv. How to increase the width?

Upvotes: 4

Views: 5864

Answers (2)

Swati
Swati

Reputation: 496

You can add CSS like:

.MuiSelect-root {
    min-width: 300px;
}

If you have multiple dropdowns in the same component then you must use this CSS with its parent class.

Upvotes: 0

Nitheesh
Nitheesh

Reputation: 19986

User property style={{ width: value}} to set width

You can find the updated version of your fiddle here.

example: 

<TextField
  select
  variant="outlined"
  value={values.age}
  onChange={handleChange}
  style={{ width: 400}}
  inputProps={{ name: "age", id: "outlined-age-simple" }}
>
  <MenuItem value="">
    <em>None</em>
  </MenuItem>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</TextField>

Upvotes: 4

Related Questions