Angular Material - md-autocomplete 下拉菜单的宽度答案

【问题标题】：Angular Material - md-autocomplete dropdown's widthAngular Material - md-autocomplete 下拉菜单的宽度
【发布时间】：2016-10-01 16:20:30
【问题描述】：

我正在使用来自 Angular Material 的 md-autocomplete：here

似乎下拉菜单的宽度与输入字段的宽度一致。如果某个项目的文本太长，则有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。我该如何解决？

【问题讨论】：

你能在 Plunkr 上分享代码吗？
我注意到您最终使用的样式有效，但是如果您使用键盘滚动项目，滚动条不再跟随所选项目:(

标签： javascript angularjs angular-material md-autocomplete

【解决方案1】：

对于任何仍然面临自动完成值被裁剪的问题的人，因为面板宽度仅与字段一样宽，好消息是它现在已得到修复，哇哦！

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

自动完成：允许面板的宽度值为 auto (#11879) (8a5713e)

所以现在可以只添加属性 panelWidth 与值 auto 并且面板将增长以适应值。

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

【讨论】：

【解决方案2】：

您可以使用 css 来设置 md-virtual-repeat-container 的样式。

但是，这将设置您网站上可能拥有的md-virtual-repeat-container 的每个实例（即md-autocomplete 和md-virtual-repeat）。

很遗憾，目前没有调整单个 md-autocomplete 下拉菜单的选项。我创建了一个ticket and pull request，希望能解决这个问题。祈祷这将包含在 Angular Material 的未来版本之一中。

祝你好运！

【讨论】：

谢谢。请参阅我对原始问题的编辑。我现在有另一个问题。
您可以将width 和max-width 调整为md-virtual-repeat-container，但它不会自动调整为结果列表，因为所有子元素都设置为position:absolute。最简单的做法是将width 和max-width 设置为所需的百分比，然后调整left 以使结果居中。我不建议将 css 覆盖到其余的子元素，因为它是专门为以某种方式外观和工作而编写的。如果您需要完全自定义，我建议您创建自己的自定义指令以获得您正在寻找的内容。

【解决方案3】：

您需要在 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 测试

【讨论】：

【解决方案4】：

我很晚才知道，但在材料 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;
  }
}

【讨论】：