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

Question

我有一个关于AngularJS材料的md自动完成的问题。实际上，我在使用md-virtual-repeater-container时遇到了麻烦，md-autocomplete使用它来呈现带有建议的下拉列表。

此元素不会显示下拉列表中显示的建议文本的完整内容。

截图如下：

​

​

在这里，它显示了建议，但它被屠宰并附加了"...“。

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

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

这是一个可以使用的codepen：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

每次使用这个非常有用的函数Calculate text width with JavaScript

• Profit

分派自动完成列表时，autocomplete

• Scale md-

1. 中的最长元素都会自动完成

另请参阅缩放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;
}