角度素材 - MD-オートコンプリートのドロップダウンの幅

Question

私は角材質からmd-autocompleteを使用しています：here

ドロップダウンの幅は、入力フィールドの幅で行くようです。アイテムのテキストが長すぎる場合は、ellipsisです。

しかし、入力フィールドの幅を比較的短く保ちながら、アイテムの全文を表示したいとします。つまり、ドロップダウンの幅は内容とともに拡大するはずです。

md-autocompleteの要素のスタイルを検査しようとしましたが、そのトリックを行うスタイルは見つかりませんでした。何か案が？

EDIT：

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

しかしもう一つの問題があります：

は、ここで私がなってしまったスタイルです。 overflow-y:scrollは、不要な場合でも常に垂直スクロールバーを表示します。 overflow-y:autoに変更すると、垂直スクロールバーが表示されているときにellipsisが作成されます。これをどうすれば解決できますか？

Answer 1

CSSを使用してmd-virtual-repeat-containerのスタイルを付けることができます。

しかし、それはあなたがあなたのサイト（すなわち、md-autocompleteとmd-virtual-repeat）に及ぼし得るmd-virtual-repeat-containerのすべてのインスタンスのスタイルを設定します。

残念ながら、個々のmd-autocompleteドロップダウンを調整するオプションはありません。この問題を解決するためにticket and pull requestを作成しました。指先が交差して、これが角度材料の将来のリリースの1つに含まれることになります。

運が良かった！

Answer 2

md-autocomplete要素にクラスを設定して、CSSでターゲティングできるようにする必要があります。この例に

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

を参照してください。そして、CSSであなたはこの

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

EDITSを実行する必要があります。あなたはPlunkr上のコードを共有することができます材料