Currently a beginner student to grid and mui, but I am trying to create a text area that can hold many values. I have a character string of 2689 and I populate it in MUI TextField but it's giving me some weird visual bugs.
I have like 3 rows at the top hidden but can't see them because my vertical scroll bar is at the top. And if I were to scroll down you can see a border going across the text area. I believe this might be from the InputLabelProps.
Here's my code my component portion of the code
<Box hidden={tabValue !== 1}>
<Grid container spacing={2}>
<Grid item xs={12} md={10}>
<TextField
id="runIds"
label="Enter Run IDs"
multiline
variant="outlined"
fullWidth
value={runIds}
onChange={(e) => setRunIds(e.target.value)}
InputProps={{
style: {
marginTop: '10px',
height: 'auto',
maxHeight: '150px',
overflowY: 'auto',
border: '1px solid #bdbdbd',
},
}}
InputLabelProps={{
style: {
top: '-5px',
},
}}
/>
</Grid>
<Grid container spacing={2}>
<Grid item xs={12} sm={6} md={4}>
<FormControl fullWidth variant="outlined">
<Row style={{ justifyContent: 'center', display: 'flex', margin: '10px'}}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<Col lg={6} style={{ marginBottom: '20px' }}>
<DesktopDatePicker
className={classes.desktopColumn}
label="Date From:"
inputFormat="MM/DD/YYYY"
value={dateFrom}
name="from"
onChange={handleDateFromChange}
renderInput={(params) => <TextField {...params} InputProps={{ style: { fontSize: '1.1rem' } }} />}
/>
</Col>
<Col lg={6} style={{ marginBottom: '20px' }}>
<DesktopDatePicker
className={classes.desktopColumn}
label="Date To:"
inputFormat="MM/DD/YYYY"
value={dateTo}
name="to"
onChange={handleDateToChange}
renderInput={(params) => <TextField {...params} InputProps={{ style: { fontSize: '1.1rem' } }} />}
/>
</Col>
</LocalizationProvider>
</Row>
</FormControl>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Button
variant="contained"
color="primary"
onClick={handleImportRunIdsClick}
style={{ marginTop: '20px' }}
>
Import Run IDs
</Button>
</Grid>
</Grid>
</Grid>
</Box>
This is for what you see under the highlighted 'Runs' tab. I am using makeStyles for some Dialog styling. Just in case (if needed) here's the whole component and it's class styling.
const useStyles = makeStyles((theme) => ({
dialogWrapper: {
padding: theme.spacing(2),
position: 'absolute',
top: theme.spacing(2)
},
dialogTitle: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
closeIcon: {
marginLeft: 'auto',
},
storagesContainer: {
display: 'flex',
justifyContent: 'space-evenly',
gap: 5,
margin: '20px 0px'
},
alertContainer: {
display: 'flex',
alignItems: 'center',
marginLeft: '20px 0px',
overflow: 'hidden',
},
inputContainer: {
display: 'flex',
alignItems: 'center',
margin: '15px 0px',
marginLeft: 8
//overflow: 'hidden',
},
outlineInput: {
height: 20,
width: 50,
marginLeft: 10,
marginRight: 10,
},
buttonContainer: {
display: 'flex',
justifyContent: 'space-evenly',
overflow: 'hidden',
},
defaultButton: {
margin: theme.spacing(1),
background: 'linear-gradient(113.96deg, #E9F5F5 100%, #D9E7F4 100%)',
border: '0.5px solid #CCCCCC',
boxSizing: 'border-box',
borderRadius: '4px',
color: '#189AB4',
width: 150,
'&:disabled': {
background: '#f0f0f0', // Change this to the desired disabled background color
color: '#666666', // Change this to the desired disabled text color
},
},
button: {
margin: theme.spacing(1),
background: '-webkit-gradient(linear, left top, right bottom, from(#0075a9), to(#003049))',
border: '0.5px solid #CCCCCC',
boxSizing: 'border-box',
borderRadius: '4px',
color: 'white',
width: 150,
'&:disabled': {
background: '#f0f0f0', // Change this to the desired disabled background color
color: '#666666', // Change this to the desired disabled text color
},
},
deleteButton: {
margin: theme.spacing(1),
background: 'linear-gradient(98.3deg, rgb(128, 0, 0) 10.6%, rgb(255, 0, 0) 97.7%)',
border: '0.5px solid #CCCCCC',
boxSizing: 'border-box',
borderRadius: '4px',
color: 'white',
width: 150,
'&:disabled': {
background: '#f0f0f0', // Change this to the desired disabled background color
color: '#666666', // Change this to the desired disabled text color
},
},
allButtonsContainer: {
display: 'flex',
justifyContent: 'space-between',
margin: '15px 0px',
},
desktopColumn: {
fontSize: 10
},
}));
const classes = useStyles();
return (
<>
<Dialog disableEnforceFocus onClose={handleClose} aria-labelledby="customized-dialog-title" open={isOpen} fullWidth maxWidth={'md'} classes={{paper: classes.dialogWrapper}} BackdropProps={Boolean(deleteStatus) ? { onClick: () => {} } : {}}>
<DialogTitle>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Typography variant="h6">Storage Management</Typography>
<IconButton onClick={handleClose}>
<CloseIcon />
</IconButton>
</div>
</DialogTitle>
<div style={{ display: 'grid', gridTemplateRows: 'repeat(2, 1fr)', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px', marginBottom: 30, marginLeft: 30 }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<Typography>Stored Runs: {runInfoCount}</Typography>
</div>
<div style={{ display: 'flex', alignItems: 'center' }}>
<Typography>Available Storage (runs): {diskSpace}</Typography>
</div>
<div style={{ display: 'flex', alignItems: 'center' }}>
<Typography>Storage to be freed with current rules (runs): {calcFreeSpace}</Typography>
</div>
<div style={{ display: 'flex', alignItems: 'center' }}>
<Typography>Last clean-up completed at: {lastCleanupDate}</Typography>
</div>
</div>
<Tabs value={tabValue} onChange={handleTabChange} indicatorColor='primary'>
<Tab label="Rules" />
<Tab label="Runs" />
</Tabs>
<DialogContent dividers style={{ overflow: 'hidden', margin: 0 }}>
<Box hidden={tabValue !== 0}>
<div className={classes.inputContainer}>
<Typography>Alert when available storage is below:</Typography>
<OutlinedInput
id="alertRun"
name='alertRun'
type="number"
value={values.alertRun}
onChange={handleInputChange}
className={classes.outlineInput}
disabled={Boolean(delete_run_request_status)}
/>
<Typography>runs</Typography>
</div>
<Stack spacing={1} margin={1}>
<div className={classes.inputContainer}>
<Typography>Remove all data for runs older than:</Typography>
<OutlinedInput
id="allRuns"
name='allRuns'
type="number"
value={values.allRuns}
onChange={handleInputChange}
className={classes.outlineInput}
disabled={Boolean(delete_run_request_status)}
/>
<Typography>months</Typography>
</div>
<div className={classes.inputContainer}>
<Typography>Remove base-calling quality data for runs older than:</Typography>
<OutlinedInput
id="baseCallingQuality"
name='baseCallingQuality'
type="number"
value={values.baseCallingQuality}
onChange={handleInputChange}
className={classes.outlineInput}
disabled={Boolean(delete_run_request_status)}
/>
<Typography>months</Typography>
</div>
<div className={classes.inputContainer}>
<Typography>Remove signal quality and wafer maps data for runs older than:</Typography>
<OutlinedInput
id="signalQualityWafer"
name='signalQualityWafer'
type="number"
value={values.signalQualityWafer}
onChange={handleInputChange}
className={classes.outlineInput}
disabled={Boolean(delete_run_request_status)}
/>
<Typography>months</Typography>
</div>
<div className={classes.inputContainer}>
<Typography>Remove system debug data for runs older than:</Typography>
<OutlinedInput
id="systemDebug"
name='systemDebug'
type="number"
value={values.systemDebug}
onChange={handleInputChange}
className={classes.outlineInput}
disabled={Boolean(delete_run_request_status)}
/>
<Typography>months</Typography>
</div>
<div className={classes.inputContainer}>
<Typography>Remove amp runs older than:</Typography>
<OutlinedInput
id="ampRuns"
name='ampRuns'
type="number"
value={values.ampRuns}
onChange={handleInputChange}
className={classes.outlineInput}
disabled={Boolean(delete_run_request_status)}
/>
<Typography>months</Typography>
</div>
</Stack>
<div className={classes.buttonContainer}>
<DialogActions>
<Button autoFocus onClick={handleDefaultClick} color="primary" className={classes.defaultButton} disabled={Boolean(delete_run_request_status)}>
Default
</Button>
<Button autoFocus onClick={handleApplyClick} color="primary" className={classes.button} disabled={Boolean(delete_run_request_status)}>
Apply
</Button>
</DialogActions>
</div>
</Box>
<Box hidden={tabValue !== 1}>
<Grid container spacing={2}>
<Grid item xs={12} md={10}>
<TextField
id="runIds"
label="Enter Run IDs"
multiline
variant="outlined"
fullWidth
value={runIds}
onChange={(e) => setRunIds(e.target.value)}
InputProps={{
style: {
marginTop: '10px',
height: 'auto',
maxHeight: '150px',
overflowY: 'auto',
border: '1px solid #bdbdbd',
},
}}
InputLabelProps={{
style: {
top: '-5px',
},
}}
/>
</Grid>
<Grid container spacing={2}>
<Grid item xs={12} sm={6} md={4}>
<FormControl fullWidth variant="outlined">
<Row style={{ justifyContent: 'center', display: 'flex', margin: '10px'}}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<Col lg={6} style={{ marginBottom: '20px' }}>
<DesktopDatePicker
className={classes.desktopColumn}
label="Date From:"
inputFormat="MM/DD/YYYY"
value={dateFrom}
name="from"
onChange={handleDateFromChange}
renderInput={(params) => <TextField {...params} InputProps={{ style: { fontSize: '1.1rem' } }} />}
/>
</Col>
<Col lg={6} style={{ marginBottom: '20px' }}>
<DesktopDatePicker
className={classes.desktopColumn}
label="Date To:"
inputFormat="MM/DD/YYYY"
value={dateTo}
name="to"
onChange={handleDateToChange}
renderInput={(params) => <TextField {...params} InputProps={{ style: { fontSize: '1.1rem' } }} />}
/>
</Col>
</LocalizationProvider>
</Row>
</FormControl>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Button
variant="contained"
color="primary"
onClick={handleImportRunIdsClick}
style={{ marginTop: '20px' }}
>
Import Run IDs
</Button>
</Grid>
</Grid>
</Grid>
</Box>
</DialogContent>
<div className={classes.buttonContainer}>
<DialogActions>
<Button className={classes.deleteButton} autoFocus onClick={handleDeleteClick} color="primary" disabled={Boolean(delete_run_request_status)}>
Delete
</Button>
</DialogActions>
</div>
</Dialog>
{message ? (
<PopupMessage
isOpen={PopUpOpen}
message={message}
confirmationMessage={confirmationMessage}
onOk={confirmationMessage ? handleConfirmationOk : handleConfirmationCancel}
onCancel={handleConfirmationCancel}
/>
) : null}
</>
);