如何在 Material UI 中制作高度响应文本字段？

Question

I need to make a textfield with a responsive height so the height will always adjust itself to the size of the parent grid when the browser is minimized/maximized.

I looked up for a solution and I only found this: Responsive MaterialUI TextField?

and it only gave me an idea about how to solve the same problem that I had with the width. it didn't work with the height.

here is my code:

const useStyles = makeStyles({
infogrid: {
    width: '30%',
    height: '39%',
    display: 'inline-block',
    position: 'absolute',
    right: '8%',
    top: '10%',
    backgroundColor: '#00ffff',
    borderRadius: '5vh',
    alignItems: 'center',
    justifyContent: 'center',
    justifyItems: 'center',
    flexDirection: 'column',
    overflow: 'auto'
  },

label: {
    margin: '25%',
    marginTop: '0.3%',
    marginBottom: '0.3%',
    display: 'block',
    height: '9%',
    width: '50%',
    
  }
})

export default function App() {

  const  classes = useStyles()
  
  <Grid className={classes.infogrid}>
     
      <TextField fullWidth className={classes.label} id="ovalID" label="1" variant="outlined" />
      <TextField fullWidth className={classes.label} id="latitude" label="2" variant="outlined" />
      <TextField fullWidth className={classes.label} id="longitude" label="3" variant="outlined" />
      <TextField fullWidth className={classes.label} id="ovalRadius1" label="4" variant="outlined" />
      <TextField fullWidth className={classes.label} id="ovalRadius2" label="5" variant="outlined" />
      <TextField fullWidth className={classes.label} id="angel" label="6" variant="outlined" />

     
      </Grid>
 );  
}

Answer 1

Just wrap everything inside your <Grid> with a <Stack> component.

Example

<Grid>
  <Stack>
    <TextField />
    <TextField />
    <TextField />
    <TextField />
  </Stack>
</Grid>

Should make your TextField height responsive in the grid items.

Answer 2

I just solved it by changing the parent grid into a div and changing the display setting of the div to 'flex'. Also, I set the marginTop and marginBottom settings in the 'labels' class to be a little bit higher.

As long as the parent div have the flex direction set to 'column'.