Material-ui Data Grid columns rendering

Question

Does anyone know how to get dropdown fields in DatGrid showing properly? Setting the TextField height doesn't work as expected for me. Example: https://codesandbox.io/s/prod-leftpad-eixec?file=/src/App.js

Soufiane Boutahlil · Accepted Answer · 2021-06-11 11:06:22Z

1

Change the value of property box-sizing to inital:

.MuiSelect-select.MuiSelect-select {
  box-sizing: initial;
}

https://codesandbox.io/s/amazing-microservice-ner57?file=/src/styles.css:0-120

answered Jun 11, 2021 at 11:06

Soufiane Boutahlil

2,5941 gold badge9 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GregMit · Accepted Answer · 2021-06-11 11:11:32Z

0

Just add an inputProps like this to your textfield:

      <TextField
        select
        SelectProps={{
          native: true
        }}
        inputProps={{
          style:{height: '100%'}
        }}
        size="small"
      >
        <option>Sel1</option>
        <option>Sel2</option>
      </TextField>

answered Jun 11, 2021 at 11:11

GregMit

5073 silver badges12 bronze badges

Collectives™ on Stack Overflow

Material-ui Data Grid columns rendering

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related