I am trying to create a textfield with a responsive height that adjusts itself based on the size of its parent grid when the browser window is resized. I have been searching for a solution and came across this helpful post on Stack Overflow about creating a Responsive MaterialUI TextField. However, the solution provided in the post only addresses the width issue, not the height.
Here is the code I currently have:
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>
);
}