0
358
ViewsHow to properly align InputLabel in Material UI?
This is my code and this is how the InputLabel is being placed. How do I style it to make it look better. Here is my code :
<FormControl fullWidth>
<InputLabel >Select EPE</InputLabel>
<Select
labelId="select-EPE"
id="select-EPE"
label="EPE"
onChange={(event)=>{
setEPE_Record_Name(event.target.value);
EPE_Data.name = event.target.value
}}
>
{response ? response.map((item)=>{
return (<MenuItem value = {item.Name}> {item.Name} </MenuItem>);
} ) : null}
</Select>
</FormControl>
Also when I select an option it overlaps with the label.
The response part only checks and creates a dropdown option for every existing value in response array.
{response ? response.map((item)=>{
return (<MenuItem value = {item.Name}> {item.Name} </MenuItem>);
} ) : null}
How do I fix the label properly?
·
Juan Pablo Isaza
1 answers
Answer question0
for anyone curious, I solved the issue by changing this one part of the code. Use Textfield instead of Select.
<FormControl fullWidth>
<TextField
select
variant={"outlined"}
label="Select EPE"
onChange={(event)=>{
setEPE_Record_Name(event.target.value);
EPE_Data.name = event.target.value
}}
>
{response ? response.map((item)=>{
return (<MenuItem value = {item.Name}> {item.Name} </MenuItem>);
} ) : null}
</TextField>
</FormControl>
·
Juan Pablo Isaza
Report
Answer question