Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Autocomplete] How to change the dropdown width?

See original GitHub issue

Order ID 💳

32742

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

The problem in depth 🔍

Hello, As per my requirement I want to show two fileds eg:Name and Discription in a AutoComplete component . my problem is the dropdown container width is associated with Autocomplete width . I want to achive this type of dropdown. I also review documentation Country select Autocomplete. Please let me khow how we can make this work.

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Issue Analytics

State:
Created 2 years ago
Comments:8 (5 by maintainers)

Top GitHub Comments

4reactions

n0r8commented, May 24, 2022

You can pass props to the Paper component that renders the list (Material UI v5.8.0):

    <Autocomplete
      sx={{ width: 200 }}
      componentsProps={{
        paper: {
          sx: {
            width: 300
          }
        }
      }}
    />

https://codesandbox.io/s/countryselect-material-demo-forked-3snxsy?file=/demo.js

1reaction

liesislukascommented, May 24, 2022

What i did is i inspected what kind of mui component is used to render dropdown and you may find it’s popper with set width. So i overwrite that width.

Here you go:

https://codesandbox.io/s/countryselect-material-demo-forked-3n4xob?file=/demo.js

Top Results From Across the Web

jQuery UI Autocomplete Width Not Set Correctly - Stack Overflow

I use this drop-in solution: jQuery.ui.autocomplete.prototype._resizeMenu = function () { var ul = this.menu.element; ul.outerWidth(this.element.

How to change the width of the AutoComplete control drop-down

The width of the AutoComplete drop-down is specified by the PreferredWidth property of the AutoComplete control. This does not affect the widths of...

How to extend the width of Autocomplete Dropdown list in ...

How to extend the width of Autocomplete Dropdown list in Issue Navigator for Advanced Option · Go to the Edit Announcement Banner page....

Change Size of AutoComplete DropDownList in UI for WinForms

I've can change the size of the main checkbox dropdown, but I can't figure out how to change the size of the autocomplete...

Is it possible to Set width of result-set dropdown of ...

We can't achieve that by making text fields wider because we use autocomplete fields as columns in a grid. Thank you. Mahmoud_Rabie.