Recently, in one of my projects, I've been utilizing Material-UI's Autocomplete component. Despite its lack of flexibility with resizing, I managed to tweak certain width, height, and font size attributes successfully. However, I'm currently facing an issue with a substantial margin between the inputRoot and input elements when resizing the viewport. Images below showcase this problem, highlighting the fixed margin that doesn't scale proportionally with the rest of the components:
https://i.stack.imgur.com/QYRoM.png https://i.stack.imgur.com/mtVvf.png
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({
// CSS styles here
});
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={'No Options'}
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',
}}
InputLabelProps={{
classes: {
root: classes.inputRoot
}
}}
/>
)}
/>
);
}
const list = [
{ title: 'Option 1'},
{ title: 'Option 2'},
];
If you'd like to see a demo, check it out here.