Элементы углового материала не выравниваются

Question

Элементы md-input не выравниваются при попытке компоновки. Может кто-нибудь сказать мне, что не так.

angular.module('app', ['ngMaterial']). 
 
controller('ctrl', function() { 
 

 
});

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script> 
 

 
<!-- Angular Material Library --> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script> 
 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css"> 
 

 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div layout="row" layout-align="center center" flex id="containerCustomerDetails"> 
 
    <md-card flex> 
 
     <md-card-content layout="row" layout-align="space-between center" > 
 
     <div flex layout="row" layout-align="space-around center"> 
 
      <md-input-container class="md-block" flex="35"> 
 
      <label>Delivery</label> 
 
      <md-select ng-model="delivery"> 
 
       <md-option ng-repeat="mode in delivery" value="{{mode.mode}}"> 
 
       {{mode.mode}} 
 
       </md-option> 
 
      </md-select> 
 
      </md-input-container> 
 
      <md-input-container class="md-block" flex="35"> 
 
      <label>Phone number</label> 
 
      <input ng-model="phone" type="text" placeholder="Phone Number"> 
 
      </md-input-container> 
 
     </div> 
 
     </md-card-content> 
 
     <md-card-actions layout="row" layout-align="center center"> 
 
     <md-button class="md-raised">Login</md-button> 
 
     </md-card-actions> 
 
    </md-card> 
 
    </div> 
 
</div>

Answer 1

Высоты двух md-input-container различны, поэтому они не будут выровнены автоматически, как вы хотите (вы можете увидеть это путем проверки элементов в консоли). Для текущей настройки я предложил бы добавить некоторые CSS:

#delivery { 
    margin-top: -7px; 
} 

angular.module('app', ['ngMaterial']). 
 
controller('ctrl', function() { 
 

 
});

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script> 
 

 
<!-- Angular Material Library --> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script> 
 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css"> 
 

 
<style> 
 
#delivery { 
 
    margin-top: -7px; 
 
} 
 
</style> 
 

 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div layout="row" layout-align="center center" flex id="containerCustomerDetails"> 
 
    <md-card flex> 
 
     <md-card-content layout="row" layout-align="space-between center" > 
 
     <div flex layout="row" layout-align="space-around center"> 
 
      <md-input-container class="md-block" flex="35" id="delivery"> 
 
      <label>Delivery</label> 
 
      <md-select ng-model="delivery"> 
 
       <md-option ng-repeat="mode in delivery" value="{{mode.mode}}"> 
 
       {{mode.mode}} 
 
       </md-option> 
 
      </md-select> 
 
      </md-input-container> 
 
      <md-input-container class="md-block" flex="35"> 
 
      <label>Phone number</label> 
 
      <input ng-model="phone" type="text" placeholder="Phone Number"> 
 
      </md-input-container> 
 
     </div> 
 
     </md-card-content> 
 
     <md-card-actions layout="row" layout-align="center center"> 
 
     <md-button class="md-raised">Login</md-button> 
 
     </md-card-actions> 
 
    </md-card> 
 
    </div> 
 
</div>

Answer 2

Вы можете просто удалить center макет выравнивать на div. Не нужно добавлять пользовательский CSS.

<div flex layout="row" layout-align="space-around"> 

angular.module('app', ['ngMaterial']). 
 
controller('ctrl', function() { 
 

 
});

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script> 
 

 
<!-- Angular Material Library --> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script> 
 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css"> 
 

 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div layout="row" layout-align="center center" flex id="containerCustomerDetails"> 
 
    <md-card flex> 
 
     <md-card-content layout="row" layout-align="space-between center" > 
 
     <div flex layout="row" layout-align="space-around"> 
 
      <md-input-container class="md-block" flex="35"> 
 
      <label>Delivery</label> 
 
      <md-select ng-model="delivery"> 
 
       <md-option ng-repeat="mode in delivery" value="{{mode.mode}}"> 
 
       {{mode.mode}} 
 
       </md-option> 
 
      </md-select> 
 
      </md-input-container> 
 
      <md-input-container class="md-block" flex="35"> 
 
      <label>Phone number</label> 
 
      <input ng-model="phone" type="text" placeholder="Phone Number"> 
 
      </md-input-container> 
 
     </div> 
 
     </md-card-content> 
 
     <md-card-actions layout="row" layout-align="center center"> 
 
     <md-button class="md-raised">Login</md-button> 
 
     </md-card-actions> 
 
    </md-card> 
 
    </div> 
 
</div>