In a project of mine I’ve been using Material-UI’s Autocomplete. Even though this component is not very resizing friendly I’ve successfully been able to alter some of the width’s/height’s and font sizes. However I’m now stuck with dealing with a huge margin between the inputRoot and input when I resize my viewport as you can see in the following images. I already searched through the Documentation and wasn’t able to find which atribute can I change in order to be able to size this margin with vw units which will allow it to resize the way that I want. Some images to illustrate my problem. As you can see when I shrink the viewport the red and green space shrinks as well but since the margin ( represented with a pink line ) stays constant it looks relatively much bigger. I want it to shrink as well. :
import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { makeStyles , withStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
input: {
width: "100%",
height: "1.4vw",
fontFamily: 'Montserrat',
fontSize: "1.25vw",
color: "#02112E",
backgroundColor: "red",
},
option: {
fontSize: "0.8vw",
fontFamily: 'Montserrat',
height: "3vw",
width: "100%",
color: "#02112E",
},
noOption: {
fontSize: "0.8vw",
fontFamily: 'Montserrat',
height: "1.2vw",
width: "100%",
color: "#02112E"
},
root: {
'& label.Mui-focused': {
color: '#00ff00',
fontSize: "0.97vw",
height: "1vw",
},
'& .MuiInput-underline:after': {
borderBottomColor: '#02112E',
borderBottomWidth: "0.21vw"
},
'& .MuiInput-underline:before': {
borderBottomColor: '#02112E',
borderBottomWidth: "0.07vw"
},
'& .MuiInput-underline:hover::before': {
borderBottomColor: '#02112E',
borderBottomWidth: "0.07vw"
},
fontSize: "1.25vw",
width: "100%",
},
inputRoot: {
color: "#02112E",
fontFamily: 'Montserrat',
fontSize: "1.25vw",
backgroundColor: "green",
}
});
export default function CountrySelect() {
const classes = useStyles();
return (
<Autocomplete
style={{ width: "60%", height: "3.47vw" }}
options={list}
classes={{
root: classes.root,
option: classes.option,
noOptions: classes.noOption,
input: classes.input
}}
disableClearable
freeSolo
noOptionsText={'Sem Opções'}
autoHighlight
getOptionLabel={(option) => option.title}
renderOption={(option) => (
<React.Fragment>
{option.title}
</React.Fragment>
)}
renderInput={(params) => (
<TextField
{...params}
label="Option"
variant="standard"
inputProps={{
...params.inputProps,
autoComplete: 'new-password', // disable autocomplete and autofill
}}
InputLabelProps={{
classes: {
root: classes.inputRoot
}
}}
/>
)}
/>
);
}
const list = [
{ title: 'opt 1'},
{ title: 'opt 2'},
];
DEMO:
Answer
You can add this to your root
"& label + .MuiInput-formControl":{
marginTop:"1vw"
},
Also you might want to add this to your inputRoot so it doesn’t fall below the drop down on smaller screens
transform: "translate(0, 2vw) scale(1)"