角度材质 - 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>