CODEWITHSUNDEEP
javascripthtmlcssangularjsangularjs-material
aee
aee

Reputation: 573

AngularJS Material - md-autocomplete hides part of the suggestion

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:

enter image description here

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>

Upvotes: 1

Views: 372

Answers (1)

cyniikal
cyniikal

Reputation: 134

  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;
}

Upvotes: 0

Related Questions