AngularJS Material - md-autocomplete hides part of the suggestion

Question

I have a problem with the md-autocomplete of AngularJS Material. Actually I'm having trouble with md-virtual-repeater-container, which is used by the md-autocomplete to render the dropdown list with suggestions.

This element doesn't show the full content of the suggestion text that is displayed in the dropdown list.

Here is a screenshot:

Here it shows the suggestion, but it is butchered and appended with "...".

I've tried using md-menu-class property on my md-autocomplete element but this doesn't work because it is only giving style to an element inside the md-virtual-container, but it doesn't do anything to grow the md-virtual-container.

The solution I need is to make somehow to grow the md-virtual-container to fit the suggestions displayed by the md-autocomplete.

Here is a codepen to play with: https://codepen.io/aee/pen/ejgxmY

And this is the code on 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. Get longest element in autocomplete
2. Scale md-autocomplete every time the autocomplete list is dispatched using this extremely helpful function: Calculate text width with JavaScript
3. Profit

See also this proof-of-concept that scaling the width of md-autocomplete works ( 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;
}