AngularJS Material - md-autocomplete 隐藏了部分建议

Question

我对 AngularJS Material 的 md-autocomplete 有疑问。实际上我遇到了 md-virtual-repeater-container 的问题，md-autocomplete 使用它来呈现带有建议的下拉列表。

此元素不显示下拉列表中显示的建议文本的全部内容。

这是截图：

这里显示的是建议，但被删减并附加了“...”。

我尝试在我的 md-autocomplete 元素上使用 md-menu-class 属性，但这不起作用，因为它只是为 md-virtual-container 内的元素赋予样式，但它没有做任何事情增长 md-virtual-container。

我需要的解决方案是以某种方式增加 md-virtual-container 以适应 md-autocomplete 显示的建议。

这是一个可以玩的代码笔：https://codepen.io/aee/pen/ejgxmY

这是codepen上的代码：

(function () {
  'use strict';
  angular
      .module('MyApp')
      .controller('CustomInputDemoCtrl', DemoCtrl);

  function DemoCtrl ($timeout, $q) {
    var self = this;

    self.readonly = false;
    self.selectedItem = null;
    self.searchText = null;
    self.selectedVegetables = [];
    self.numberChips = [];
    self.numberChips2 = [];
    self.numberBuffer = '';

    self.itemList = [
      {t:"aaaa"},
      {t:"bbbbbbbb"},
      {t:"cccccccccccccccc"},
      {t:"dddddddddddddddddddddddddddd"},
      {t:"eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee"},
      {t:"ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff"},
      {t:"eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee"},
      {t:"dddddddddddddddddddddddddddd"},
      {t:"cccccccccccccccc"},
      {t:"bbbbbbbb"},
    ]
  }
})();

.larger-width {
  with: 1000px;
}

<div ng-controller="CustomInputDemoCtrl as ctrl" layout="column" class="chipsdemoCustomInputs" ng-app="MyApp">

  <md-content class="md-padding" layout="column" style="background-color: lightgray; width: 250px">
      <md-autocomplete 
             md-selected-item="ctrl.selectedItem" 
             md-search-text="ctrl.searchText" 
             md-items="item in ctrl.itemList" 
             md-item-text="item.t" 
             placeholder="Search"
             md-floating-label="Select One">
        <md-item-template>
            <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">
                {{item.t}}
            </span>
        </md-item-template>
        <md-not-found>
            <span>No dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.</span>
        </md-not-found>
      </md-autocomplete>
  </md-content>
</div>

Answer 1

1. 在自动完成中获取最长的元素
2. 使用这个非常有用的功能在每次发送自动完成列表时缩放 md-autocomplete：Calculate text width with JavaScript
3. 利润

另请参阅缩放 md-autocomplete 宽度的概念证明 (https://codepen.io/cyniikal/pen/jpJjzB)

HTML

<md-autocomplete 
         md-selected-item="ctrl.selectedItem" 
         md-search-text="ctrl.searchText" 
         md-items="item in ctrl.itemList" 
         md-item-text="item.t" 
         placeholder="Search"
         md-floating-label="Select One" id='it-works'>

CSS

#it-works {
    width: 1000px;
}

md-content {
    overflow-x: hidden;
}