Die mehreren ausgewählten Elemente in Angular-Material übereinander stapeln?

Question

Hier ist ein Codepen für das Verhalten, das ich habe.

Die mehreren ausgewählten Optionen werden nebeneinander gestapelt, aber das Problem damit ist, sobald der Benutzer mehr und mehr Optionen auswählt der Text der Optionen über das Textfeld eines Formulars mit einer festgelegten Breite.

Ich muss einen Weg finden, um die ausgewählten Optionen übereinander zu stapeln, sobald das Ende des Textfelds dafür erreicht ist, halten Sie alle Optionen im Formularkasten stapeln.

(function() { 
 
    'use strict'; 
 
    angular 
 
     .module('MyApp') 
 
     .controller('AppCtrl', function($scope) { 
 
     this.likedAnimals = ["mouse", "dog"]; 
 
     this.animals = ["mouse", "dog", "cat", "bird", 
 
         "LongAnnnnnnimal","LongerrrrrrrrrrrrText"]; 
 
    }); 
 
})();

<div> 
 
    <md-input-container> 
 
    <md-select multiple ng-model="ctrl.likedAnimals" placeholder="please select"> 
 
     <md-option ng-repeat="a in ctrl.animals" value="{{a}}">{{a}}</md-option> 
 
    </md-select> 
 
    </md-input-container> 
 
</div>

Answer 1

Ich glaube, Sie width in px, um den die exakte Breite von md-select anstatt Angabe Breite md-option angeben sollte. Siehe den folgenden Link.

http://codepen.io/next1/pen/xVLEpy

<md-input-container style="background-color:cyan"> 
<md-select flex style="background-color:yellow;width:200px" multiple ng-model="ctrl.likedAnimals" placeholder="please select" > 
    <md-option ng-repeat="a in ctrl.animals" value="{{a}}">{{a}}</md-option> 
</md-select>