How to make mui autocomplete full width in react js?
January 14, 2023Hi Friends 👋,
Welcome To aGuideHub!
In the autocomplete default code we get sx={{ width: 300px}}. By removing this css code we get the full width of textfield.
Today, I am going to show you, how to make mui autocomplete full width in react js.
Installation
Install the following packages to use make mui autocomplete full width in react js.
npm
npm install @mui/material @emotion/react @emotion/styledyarn
yarn add @mui/material @emotion/react @emotion/styledMUI material make mui autocomplete full width example.
The below code is an example of a Material UI autocomplete full width. You have to import @mui material autocomplete and in the autocomplete default code we get sx={{ width: 300px}}. By removing this css code we get the full width of textfield.
App.js
import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
export default function ComboBox() {
return (
<Autocomplete
disablePortal
id="combo-box-demo"
options={top100Films}
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ label: 'The Shawshank Redemption', year: 1994 },
{ label: 'The Godfather', year: 1972 },
{ label: 'The Godfather: Part II', year: 1974 },
{ label: 'The Dark Knight', year: 2008 },
{ label: '12 Angry Men', year: 1957 },
{ label: "Schindler's List", year: 1993 },
{ label: 'Pulp Fiction', year: 1994 },
{
label: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ label: 'The Good, the Bad and the Ugly', year: 1966 },
{ label: 'Fight Club', year: 1999 },
{
label: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
label: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ label: 'Forrest Gump', year: 1994 },
{ label: 'Inception', year: 2010 },
{
label: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
];In the above code example, I have used the @mui/material component and make mui autocomplete full width in react js.
Check the output of the above code example.
All the best 👍
