Controlling dropdown widths

[kevinbeal]

Hello! Nice components you got here. Thanks for making them free.

I was wondering how I can make dropdowns from <Select /> and <Autocomplete /> not constrain their widths to the width of the inputs they control.

For example, I have this dropdown:

It shows a horizontal scroll bar when you hover over it. It would be nice if there were a scrollAreaProps or paperProps prop (or whatever is relevant) on the <Select />/<Autocomplete /> components and something there that would allow it to grow in size, like { style: { right: "auto" } }. But I don't know how it actually works. I mean only to convey my intention.

Any guidance would be appreciated. Thank you :)

[rtivital]

Select and Autocomplete dropdown width cannot be changed, if you need this feature, use Popover component instead.

[escobar5]

Is there any reason for this? it would be useful to have a Select with a Dropdown that has a different width, the one in that picture is conceptually a Select, not a Popover

[avigoldman]

I was able to achieve this on the <Select /> with:

<Box pos="relative">
      <Select
        w={256}
        sx={{
          '.mantine-Select-dropdown': {
            width: '400px !important',
            left: '0 !important',
          },
        }}
      />
    </Box>

The <Box/> with position=relative, keeps forces the dropdown to be aligned left with the <Select />

[arheinjohnson]

From what I can tell this is from an older version of mantine; the sx prop is no longer available

[bozosort]

You can change the width through Styles API by overriding width of wrapper element of Autocomplete. You just need to add one line of code:
<Autocomplete
styles={{ wrapper: { width: 600 } }}
placeholder="Pick one"
data={['React', 'Angular', 'Svelte', 'Vue']}
/>

You can find all inner elements of a component in styles tab of mantine documentation:(https://mantine.dev/core/autocomplete/?t=styles-api)
For more details on styles API, you can check:(https://mantine.dev/styles/styles-api/)

[petrvecera]

wow thanks a lot, you saved me!

I am baffled that you can't setup this directly on the select component , when you have big ass selector for 2 characters options 😮‍💨

[sovetski]

Thank you, you saved my day!!

[AlonMiz]

it would be beneficial to have the dropdown width adjusted depending on the width of the options.
and not fixed by the width of the Select.
similar to what ReactSelect does

[Marjona6]

+1, would really love to see this.

[AndrejNemec]

+1

[arheinjohnson]

+1

[laugri]

Hey @rtivital, what is your stance on this ?

[rtivital]

You can do that with comboboxProps={{ width: 200 }}

[rtivital]

The feature is available with comboboxProps={{ width: 200 }}