角度材料限制宽度以md选择多个

Question

我有一个md-select，在选择多个项目后，宽度不符合100％宽度限制。这是一个例子：

问题：problem image

/* global angular */
angular.module('app', ['ngMaterial']);

    angular.module('app').controller('MainCtrl', function ($scope) {
        
        $scope.fruits = [
            'apple',
            'banana',
            'orange',
            'mango',
            'kiwi',
            'pineapple',
            'lemon',
            'blueberry',
            'strawberry'];
    });

/* custom css */
    .no-padding {
        padding: 0 !important;
        margin: 0 !important;
      }

<!- html pages -!>
<script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.5.9/angular-aria.min.js"></script>
    <script src="https://code.angularjs.org/1.5.9/angular-animate.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
    <link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


    <div ng-app="app" ng-controller="MainCtrl as mainCtrl">

      <div class="col-xs-4">
        <div class="input-group">
        <md-select class="form-control no-padding" ng-model="t" aria-label="t" multiple>
          <md-option ng-value="opt" ng-repeat="opt in fruits">{{opt}}</md-option>
        </md-select>

        <a class="input-group-addon btn btn-md">
           <i class="glyphicon glyphicon-remove"></i>
         </a>
         
        </div>
       </div>
     
       <div class="col-xs-4"> 
        <input type="text" class="form-control">
       </div>
       
     </div>

仅当用户选择“md-select”项目时才会出现此问题，请参阅上面的示例。

Answer 1

问题似乎是使用表样式的bootstrap的输入组和没有表格样式的Angular Material之间的冲突。我建议改用md-input-container。

/* global angular */
angular.module('app', ['ngMaterial']);

angular.module('app').controller('MainCtrl', function($scope) {

  $scope.fruits = [
    'apple',
    'banana',
    'orange',
    'mango',
    'kiwi',
    'pineapple',
    'lemon',
    'blueberry',
    'strawberry'
  ];
});

/* custom css */

.no-padding {
  padding: 0 !important;
  margin: 0 !important;
}

<!- html pages -!>
<script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.9/angular-aria.min.js"></script>
<script src="https://code.angularjs.org/1.5.9/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div ng-app="app" ng-controller="MainCtrl as mainCtrl">

  <div class="col-xs-4">
    <md-input-container class="md-block" flex-gt-xs>
      <md-select class="form-control no-padding" ng-model="t" aria-label="t" multiple>
        <md-option ng-value="opt" ng-repeat="opt in fruits">{{opt}}</md-option>
      </md-select>

      <md-icon><i class="glyphicon glyphicon-remove"></i></md-icon>

    </md-input-container>
  </div>

  <div class="col-xs-4">
    <md-input-container class="md-block" flex-gt-xs>
      <input type="text" class="form-control" aria-label="test input">
    </md-input-container>
  </div>

</div>