How to change height of autocomplete material ui

by

How to Change Height of Autocomplete Material UI

The autocomplete component in Material UI can have its height customized using CSS. Here’s how you can do it:

  1. Add a class to the Autocomplete component.
  2. In your CSS, target that class and set the desired height value.

Example:

Assumptions:

  • You have already installed Material UI in your project.
  • You are using a CSS preprocessor like SCSS or Less.

1. Add a class to the Autocomplete component:

    import Autocomplete from '@material-ui/lab/Autocomplete';

    const MyAutocomplete = () => {
      return (
        <Autocomplete
          className="custom-autocomplete"
          options={options}
          renderInput={(params) => <TextField {...params} label="Custom Autocomplete" />}
        />
      );
    }

2. Target the class in your CSS:

    .custom-autocomplete .MuiAutocomplete-popupIndicator {
      height: 150px;
      /* Replace the value with your desired height */
    }

In the above example, we are targeting the “custom-autocomplete” class and setting the height of the dropdown list through the selector “.MuiAutocomplete-popupIndicator”. Make sure to replace the height value with your desired height.

That’s it! The Autocomplete component will now have a custom height for its dropdown list.

Additional Notes:

  • The CSS class name “custom-autocomplete” is just an example. You can use any class name you prefer.
  • You can further customize the Autocomplete component’s appearance by targeting other classes within the component using CSS.

Leave a comment