Material UI Autocomplete: change margin between inputRoot and input

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. :

enter image description here enter image description here

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:

https://2y3jh.csb.app/

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)"

Leave a Reply

Your email address will not be published. Required fields are marked *