角度材質 - md-autocomplete下拉列表的寬度

Question

我正在使用Angular Material的md-autocomplete ： 這里

下拉列表的寬度似乎與輸入字段的寬度一致。 如果項目的文本太長，則會有ellipsis 。

但是，我想顯示項目的全文，同時保持輸入字段的寬度相對較短。 也就是說，下拉列表的寬度應隨其內容而擴展。

我試過檢查md-autocomplete元素的樣式，但是找不到任何可以解決這個問題的樣式。 任何想法？

編輯：

這是我最終擁有的風格：

.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-virtual-repeat-container 每個實例（即md-autocomplete和md-virtual-repeat ）。

不幸的是，目前無法調整單個md-autocomplete下拉列表。 我創建了一張票並提出請求以希望解決此問題。 手指交叉，這將包含在Angular Material的未來版本之一中。

祝你好運！

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

編輯 ：測試材料1.0.9

Answer 3

我知道它很晚但在材料1.1.9中你可以在md-autocomplete指令上添加一個屬性md-menu-class 。

您添加的類將在虛擬重復中的.md-autocomplete-suggestions元素上報告。 因此，您只能為此自動填充功能自定義css。

例如：

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

會產生

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

所以你可以用css自定義：

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

Answer 4

，對於仍然面臨自動完成值被裁剪的問題的人，因為面板寬度僅與場一樣寬，好消息是它現在已被修復，哇哦！

Angular Material Release 6.4.0 （2018-07-16）引入了以下功能，

• 自動完成 ：允許面板的寬度值為auto（ ＃11879 ）（ 8a5713e ）

所以現在可以只使用值auto添加屬性panelWidth，面板將增長以適應值。

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