CODEWITHSUNDEEP
reactjsmaterial-ui
Vladi Feldman
Vladi Feldman

Reputation: 952

How can I change the width of Material UI Autocomplete popover

When using the Select from Material-UI, there's a prop there called 'autoWidth' which sets the width of the popover to match the width of the items inside the menu.

Is there a similar option for the Autocomplete component?

what i'm trying to achieve is that the width of the TextField is independent of the width of the menu, and the width of the menu is determined by the menu items rather than a hard-coded 'width.

What I managed to find so far is an option to provide width to the 'paper' component using classes (see code below), but it's independent of the actual items' width and the position of the paper isn't adjusted to stay inside the window.

const styles = (theme) => ({
  paper: {
    width: "450px"
  }
});

function ComboBox(props) {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      classes={{
        paper: props.classes.paper
      }}
      getOptionLabel={(option) => option.title}
      style={{
        width: 300,
        paddingLeft: "100px"
      }}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

link to codesandbox

What i'm trying to achieve is a similar behavior to this codesandbox but using the Autocomplete component. Notice that width of the pop-up menu is taken from the menu items while the width of the Select component is hard-coded.

Upvotes: 27

Views: 47118

Answers (8)

Aayush Bhattacharya
Aayush Bhattacharya

Reputation: 1934

update sx property

<Autocomplete
    sx={{
          "& .MuiInputBase-root": { height: "35px", backgroundColor: 'white' }, //update the styles here
    }}
    renderInput={(params) => (
                 <TextField
                           {...params}
                           fullWidth
                           id="product_sku"
                           InputLabelProps={{ shrink: true}}
                           error={false}
                           value={value?.sku_name || ''}
                           onChange={handleProductSearch}
                  />
               )}
</>

Upvotes: 0

SaF
SaF

Reputation: 464

you can pass this props:

componentsProps={{ popper: { style: { width: 'fit-content' } } }}

to Autocomplete component

<Autocomplete
  ....
  componentsProps={{ popper: { style: { width: 'fit-content' } } }}
/>

Upvotes: 32

KARTHIKEYAN.A
KARTHIKEYAN.A

Reputation: 20118

We can use autocomplete componentsProps to change the paper styling in the following way

<Autocomplete
        componentsProps={{
            paper: {
                sx: {
                    border: '1px solid lightgray',
                    marginLeft: 10.5,
                    width: 484,
                }
            }
        }}
    />

Upvotes: 0

Sumit Asagaonkar
Sumit Asagaonkar

Reputation: 355

Custome proper
const CustomPopper = (props) => {
return (
  <Popper
    {...props}
    placement="bottom"
    sx={{
      height: "10px",
    }}
    style={{ width: props.anchorEl.clientWidth, height: "5px" }}
  />
);

};

Autocomplte component
<Autocomplete
      multiple
      freeSolo
      size="small"
      id="tags-outlined"
      options={allTags}
      getOptionLabel={(option) => option}
      // defaultValue={[]}
      filterSelectedOptions
      value={siteTags}
      onChange={(event, newval) => {
        setTags(newval);
      }}
      PopperComponent={CustomPopper}
      renderInput={(params) => (
        <TextField {...params} placeholder="Enter tags" />
      )}
    />

you can use "props.anchorEl.clientWidth" in custome proper and much more

Upvotes: 1

Giovanni Esposito
Giovanni Esposito

Reputation: 11166

To have a dynamic menu based on elements inside the menu itself you need to customize the Autocomplete's PopperComponent property in this way:

  1. Define a custom Popper:

    const PopperMy = function (props) {
   return <Popper {...props} style={styles.popper} placement="bottom-start" />;
};

  2. In Popper style, set the width to "fit-content":

    const styles = (theme) => ({
   popper: {
      width: "fit-content"
   }
});

  3. Pass the component PopperMy to Autocomplete:

    <Autocomplete
   PopperComponent={PopperMy}
   ...  
/>

Here is your codesandbox modified.

Upvotes: 44

Tellisense
Tellisense

Reputation: 2014

<Autocomplete fullWidth sx={{ width: 600 }} />}

in MUI v5 you can use the sx prop.

Upvotes: -2

Kumar Nitesh
Kumar Nitesh

Reputation: 1652

Did you look into 'fullWidth' attribute of autocomplete api?

https://material-ui.com/api/autocomplete/

Here is an example which I think will fulfill your requirement

https://codesandbox.io/s/full-width-autocomplete-ph30d?file=/demo.js

fullWidth if true, will take the width of its container:

Upvotes: 3

Shubham Verma
Shubham Verma

Reputation: 5054

According to material official documentaion you can pass style props:

<Autocomplete
      id="combo-box-demo"
      options={top100Films}
      style={{ width: "450px" }}
      getOptionLabel={(option) => option.title}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />

Here is the demo:https://codesandbox.io/s/material-demo-forked-qon1b

Upvotes: -3

Related Questions