Angular Material - md-Autocomplete Dropdown Breite

Question

Ich bin md-autocomplete von Angular Material: here

Es scheint, die Breite der Drop-Down mit der Breite des Eingabefeldes geht. Wenn der Text eines Artikels zu lang ist, gibt es ellipsis.

Ich möchte jedoch den vollständigen Text eines Elements anzeigen, während die Breite des Eingabefeldes relativ kurz bleibt. Das heißt, die Dropdown-Breite sollte mit ihrem Inhalt erweitert werden.

Ich habe versucht, die Stile von md-autocomplete 's Elemente zu überprüfen, konnte aber keinen Stil finden, der den Trick tut. Irgendeine Idee?

EDIT:

Hier sind der Stil, den ich mit endete:

.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 
} 

Allerdings gibt es noch ein Problem. Die overflow-y:scroll zeigt immer die vertikale Bildlaufleiste, auch wenn sie nicht benötigt wird. Wenn ich es in overflow-y:auto ändere, wird die vertikale Bildlaufleiste, wenn vorhanden, ellipsis erstellen. Wie löse ich das?

Answer 1

Sie können CSS verwenden, um md-virtual-repeat-container zu stylen.

aber das würde Stil jede Instanz von md-virtual-repeat-container, die Sie auf Ihrer Website haben können (dh md-autocomplete und md-virtual-repeat).

Leider gibt es im Moment keine Möglichkeit einzelne md-Autocomplete-Dropdowns anzupassen. Ich habe eine ticket and pull request erstellt, um dieses Problem hoffentlich zu lösen. Daumen drücken, dass dies in einer der zukünftigen Versionen von Angular Material enthalten sein wird.

Viel Glück!

Answer 2

Sie müssen Klasse auf Ihrem md-autocomplete Element festlegen, so dass Sie es in CSS zielen können. Sehen Sie dieses Beispiel

<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> 

Und dann in CSS brauchen Sie dieses

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

EDITS tun: Getestet mit Materialien 1.0.9