6

I want to increase the width of the md-autocomplete box, since some of the items that appear are not fully displayed (they end in "...").

Is there any way to change the width of md-autocomplete's dropdown box?

McDonnas
  • 73
  • 1
  • 4
  • try adding .md-virtual-repeat-container.md-autocomplete-suggestions-container { right:0; } to your css. Is this what you wanted to achieve? – ShivangiBilora Sep 24 '15 at 06:50

2 Answers2

3

Add md-menu-class="class-name" attribute to your <md-autocomplete> tag and give CSS to class-name

Please check the version of your angular-material and whether that version supports this feature or not. If the above does not work. Try doing something like following. (Not recommended)

CSS:

.md-virtual-repeat-container.md-autocomplete-suggestions-container {
     width:700px !important;
}

This is working in your codepen. Please try this out.

Mohit Adwani
  • 519
  • 3
  • 13
  • Adding a class using md-menu-class helped, but the box still didn't increase when I added width: 500px. Adding width helped a bit because it no longer has the '...'. I think it increased the width of the textbox inside the dropdown, not the dropdown itself. What CSS do I need to increase the dropdown width? – McDonnas Sep 22 '15 at 04:54
  • @McDonnas It has a max-width property set in angular-material.css as well. in your css. Add the following max-width: 500px !important; – Mohit Adwani Sep 22 '15 at 08:01
  • adding max-width: 500px !important didn't have an affect on the dropdown width. I even set max-width to 5000px and it didn't change anything. – McDonnas Sep 22 '15 at 19:32
  • @McDonnas A plunkr would really help me out. And also what is the version of angular-material, that you are using? – Mohit Adwani Sep 24 '15 at 04:02
  • I am using version 0.11.0. Here is a codepen of something very similar to my code. https://codepen.io/anon/pen/BoLwJZ – McDonnas Sep 24 '15 at 04:25
  • @McDonnas I have updated my answer. This has been tested on your codepen only. Please check. – Mohit Adwani Sep 24 '15 at 06:43
  • You need a combination of the two classes in order to get what want – aholtry Jul 20 '16 at 22:47
1

It looks like they fixed this issue, so you can just set the width of the md-autocomplete through css and everything else adjusts appropriately.

<md-autocomplete style="width: 22em;" ...
Guy Schalnat
  • 1,697
  • 15
  • 26