My modal component is displaying a form with text inputs and select components, but the Select Labels are appearing at the top left corner of the form. I tried a solution from here, but it didn't work for me. Another issue is that when I click on one Select component, the other one seems to be linked and shows as focused. As someone new to Material UI (only using it for a few days), I find this challenging. Additionally, the Select on the left is not aligned with the Text input.
Below is the Dialog/Form code. Please ignore the Select onChange event functions.
{/* Modal Dialog to add the Form*/}
<Dialog maxWidth="100" open={createOpportunity} onClose={handleDialogClose}>
<DialogTitle align='center' id="form-dialog-title">Add New Opportunity</DialogTitle>
<FormControl className={classes.formMainClass}>
<div className='formDivs'>
<TextField autoFocus margin="dense" id="name" label="Opportunity Name" type="text" fullWidth/>
<TextField margin="dense" id="address" label="Address" type="text" fullWidth/>
<TextField margin="dense" id="city" label="City" type="text" fullWidth/>
<div className='state-zip'>
<InputLabel htmlFor="state">State</InputLabel>
<Select fullWidth inputProps={{id: "state"}} value={value} onChange={event => setValue(event.target.value)}>
<MenuItem value="">Empty Value for First Option</MenuItem>
<MenuItem value="Hey">Hey</MenuItem>
</Select>
<span> </span>
<TextField margin="dense" id="zip" label="Zip" type="text" fullWidth/>
</div>
<TextField margin="dense" id="architect" label="Architect" type="text" fullWidth/>
<TextField margin="dense" id="consultant" label="Consultant" type="text" fullWidth/>
<TextField margin="dense" id="duedate" label="Due date" type="date" fullWidth InputLabelProps={{shrink: true}}/>
</div>
<div className='formDivs'>
<InputLabel htmlFor="manager">Manager</InputLabel>
<Select fullWidth inputProps={{id: "manager"}} value={value} onChange={event => setValue(event.target.value)}>
</Select>
<div className='state-zip'>
<InputLabel htmlFor="status">Status</InputLabel>
<Select fullWidth inputProps={{id: "status"}} value={value} onChange={event => setValue(event.target.value)}>
</Select>
<span> </span>
<InputLabel htmlFor="source">Source</InputLabel>
<Select fullWidth inputProps={{id: "source"}} value={value} onChange={event => setValue(event.target.value)}>
</Select>
</div>
<TextField multiline rows={4} rowsMax={Infinity} margin="dense" id="description" label="Description" type="text" fullWidth/>
<TextField multiline rows={4} rowsMax={Infinity} margin="dense" id="notes" label="Notes" type="text" fullWidth/>
</div>
</FormControl>
<DialogContent>
<DialogContentText>Opportunities text.</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleDialogClose} color="primary">Cancel</Button>
<Button onClick={handleDialogClose} color="primary">Save</Button>
</DialogActions>
</Dialog>
Code for the Styling
.opportunities {
display: flex;
align-content: center;
justify-content: flex-start;
align-items: center;
width: auto;
}
.top-buttons {
margin-top: 15px;
margin-bottom: 0;
width: 90%;
}
.formDivs {
width: 50%;
margin: 1% 3%;
}
.state-zip, .manager {
display: flex;
flex-direction: row;
}
https://i.stack.imgur.com/sNaBO.png
I would greatly appreciate any advice, comments, or suggestions.