silvermax silvermax - 5 months ago 44
AngularJS Question

angular material elements not aligning

The

md-input
elements are not aligning when I try the layout. Can someone tell me what is wrong.



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

The heights of the two md-input-container are different so they won't align automatically the way you want (you can see this by inspecting the elements in the console). For your current setup I would suggest adding some 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>