CODEWITHSUNDEEP
reactjsmaterial-uiautocomplete
arunmmanoharan
arunmmanoharan

Reputation: 2675

MUI Autocomplete growing out of container - React

I am using MUI Autocomplete and I want it to stay within the container bounds. I am using AutoComplete inside a with the limitTags option set. When I click on the autocomplete, it extends out of the container. Is there a way to force it to be inside and just expand vertically instead of horizontally?

This is my code.

import * as React from "react";
import Autocomplete from "@mui/material/Autocomplete";
import Grid from "@mui/material/Grid";
import TextField from "@mui/material/TextField";

export default function LimitTags() {
  return (
    <Grid container>
      <Grid item md={2}>
        <Autocomplete
          multiple
          limitTags={2}
          id="multiple-limit-tags"
          options={top100Films}
          getOptionLabel={(option) => option.title}
          defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
          renderInput={(params) => (
            <TextField {...params} label="limitTags" placeholder="Favorites" />
          )}
        />
      </Grid>
    </Grid>
  );
}

This is my codesandbox link: https://codesandbox.io/s/exciting-glade-shmjfk?file=/demo.tsx

Please advice.

Upvotes: 1

Views: 378

Answers (1)

Miguel Hidalgo
Miguel Hidalgo

Reputation: 384

I checked you codesandbox and its working as you expect on 32 inch screen, but not on small devices and this is due to the <Grid/> compoent

You can check: https://mui.com/material-ui/react-grid/

Here is an example that work on both sizes:


export default function LimitTags() {
  return (
    <Grid container>
      <Grid item  xs={3.8} md={2}>
        <Autocomplete
          multiple
          limitTags={2}
          id="multiple-limit-tags"
          options={top100Films}
          getOptionLabel={(option) => option.title}
          defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
          renderInput={(params) => (
            <TextField {...params} label="limitTags" placeholder="Favorites" />
          )}
        />
      </Grid>
    </Grid>
  );
}

Upvotes: 0

Related Questions