AngularJS材質-md-autocomplete隱藏了部分建議

Question

我對AngularJS材質的md-autocomplete有問題。 實際上，我在使用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

1. 獲取最長的自動完成元素
2. 每次使用此非常有用的功能調度自動完成列表時，縮放md-autocomplete： 使用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;
}