Angular-Materialの複数の選択項目の上に積み重ねますか？

Question

ここには私が持っている行動のためのCodepenがあります。

選択された複数のオプションは、隣り合ってスタックされていますが、ユーザーが設定した幅のフォームのテキストボックスをオーバーフローさせるオプションが増えると問題になります。

フォームボックスにすべてのオプションをスタックしておき、テキストボックスの終わりに達すると、選択したオプションを重ねて表示する方法を見つける必要があります。

(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

私はあなたではなくmd-optionに幅を指定するよりも、md-selectの正確な幅を設定するpxでwidthを指定するべきだと思います。以下のリンクを参照してください。この変更に伴い

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>