Angular Material - md-autocomplete dropdown's width

Question

I'm using md-autocomplete from Angular Material: here

It seems the dropdown's width goes with the input field's width. If an item's text is too long, there is ellipsis.

However, I want to show full text of an item, while keeping the input field's width relatively short. That is, the dropdown's width should expand with its content.

I tried inspecting the styles of md-autocomplete's elements, but couldn't find any style that does the trick. Any idea?

EDIT:

Here are the style I ended up having:

.md-autocomplete-suggestions-container{
    overflow-y:scroll
}

.md-autocomplete-suggestions-container .md-virtual-repeat-scroller{
    position:static
}

.md-autocomplete-suggestions-container .md-virtual-repeat-sizer{
    height:0 !important
}

.md-autocomplete-suggestions-container .md-virtual-repeat-offsetter{
    position:static
}

However there is one more issue. The overflow-y:scroll always shows the vertial scroll bar even when not needed. If I change it to overflow-y:auto, the vertical scroll bar when present will create ellipsis. How do I solve this?

I noticed that the styles you ended up with works, but if you use the keyboard to scroll through the items, the scroll bar does not follow the selected item anymore :( — Søren Pedersen, Jul 05 '18 at 11:56

score 9 · Answer 1 · answered Jul 18 '18 at 06:49

For anyone still facing the problem of autocomplete values being cropped because the panel width is only as wide as the field, the good news is that it has now been fixed, woohoo!

Angular Material Release 6.4.0 (2018-07-16) introduced the following feature,

autocomplete: allow panel to have a width value of auto (#11879) (8a5713e)

So now it's possible to just add the property panelWidth with the value auto and the panel will grow to fit the values.

<mat-autocomplete panelWidth="auto">
      <mat-option value="myValue">Now an option with a long label will still be readable<option>
</mat-autocomplete>

score 3 · Accepted Answer · answered Jun 02 '16 at 06:19

3

You can use css to style md-virtual-repeat-container.

However, that would style every instance of md-virtual-repeat-container that you may have on your site (ie, md-autocomplete and md-virtual-repeat).

Unfortunately, there isn't an option to adjust individual md-autocomplete dropdowns at the moment. I created a ticket and pull request to hopefully solve this issue. Fingers crossed that this will be included in one of the future releases of Angular Material.

Best of luck!

answered Jun 02 '16 at 06:19

Ann Nguyen

341
2
4

Thanks. Please see my edit to the original question. I now have another issue. – Shawn Jun 02 '16 at 17:58
You can adjust `width` and `max-width` for `md-virtual-repeat-container` but it won't automatically adjust to the list of results because all the children elements are set to `position:absolute`. The simplest thing to do is set `width` and `max-width` to a desired percentage and adjust `left` to center the results. I would not recommend overriding the css to the rest of the children elements as it was written specifically to look and work a certain way. If you need full customization, I would recommend creating your own custom directive to get exactly what you're looking for. – Ann Nguyen Jun 02 '16 at 18:58

score 3 · Answer 3 · answered Jul 19 '16 at 10:49

You need to set class on your md-autocomplete element so you can target it in css. See this example

  <md-autocomplete class="autocompletable"  
              md-min-length="0" 
              ... 
              placeholder="US State?" 
              md-menu-class="autocompletable-contents">
              <md-item-template>
                 <table>
                    <tr>
                        <td><span md-highlight-text="ctrl.searchText" 
                            md-highlight-flags="^i">{{item.ok}}</span>
                        </td><td>Foo</td>
                    </tr>
                 </table>
              </md-item-template>
              <md-not-found>
                 No states matching "{{ctrl.searchText}}" were found.
                 <a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>
              </md-not-found>
           </md-autocomplete>

And then in css you need to do this

  md-autocomplete.autocompletable{ width: 200px; }
  .autocompletable-contents{ }

EDITS: Tested with materials 1.0.9

score 1 · Answer 4 · answered May 17 '18 at 12:50

I know it very late but in materials 1.1.9 you can add an attribute md-menu-class on the md-autocomplete directive.

The class you add will reported on the .md-autocomplete-suggestions element in the virtual repeat. So you be able to customize the css for this autocomplete only.

exemple :

 <md-autocomplete ...  md-menu-class="search-field-autocomplete">

will generate

<ul class="md-autocomplete-suggestions search-field-autocomplete" ... >              
    <li md-virtual-repeat="item in $mdAutocompleteCtrl.matches" ...

so you can customize with css like :

.md-autocomplete-suggestions.search-field-autocomplete {
  li {
    color: red;
  }
}

Angular Material - md-autocomplete dropdown's width

4 Answers4

Linked