MaterialUI Label misplacement on Select component

Question

I have a form displaying inside a modal component with several text inputs and select components but somehow the Select Labels are showing at the top left corner of the form. I followed the solution explained here but I am obtaining the same result. Another problem is that when clicking on one Select the other seems to be linked and show focused. I am not experienced with Material and I have been using it for a couple of days only. I really like it but I am a bit lost here. Also, the Select on the left is not aligned with the Text input.

This is the Dialog/Form code. Disregard 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;
}

Any advise, comment or suggestion is highly appreciated.

Please provide a [code sandbox](https://codesandbox.io/s/new) reproducing your problem. — Ryan Cogswell, Feb 15 '21 at 15:11
SandBox link below: Refresh the page for dependency errors https://codesandbox.io/s/stupefied-pine-xshq9?file=/src/styles.css — Ernesto, Feb 15 '21 at 16:49

Rajiv · Accepted Answer · 2021-02-15T17:23:37.357

0

the issue is happening because you're using the FormControl element in the wrong way. This element is used to get extra control/feature/functionality over the individual form input.
So wrap your input elements with FormControl individually if you're planning to use FormControl functionalities and use div or form as a wrapping element instead of FormControl in your current code(form will be better).

Here is a related answer

Here is a working demo with the form tag :

edited Feb 15 '21 at 17:23

answered Feb 15 '21 at 17:18

Rajiv

3,346
2
12
27

Thank you @Rajiv. Now I know what is FormControl used for. – Ernesto Feb 15 '21 at 17:31
Do you know why the Label text does not fall inside the Select component? – Ernesto Feb 15 '21 at 17:37
wrap the `Select` and `InputLabel` element with `FormControl`. for reference check the 'manager' and 'state' select inputs in the demo. – Rajiv Feb 15 '21 at 17:42

MaterialUI Label misplacement on Select component

1 Answers1