角度材料极限宽度以 md 选择多个为单位

Question

>我有一个md-select，在选择多个项目后，宽度不符合100%的宽度限制。下面是一个示例：

问题

：问题图像

/* 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

这些问题似乎是由于使用表格样式的引导输入组与不使用表格样式的 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>