Umer Farooq Umer Farooq - 19 days ago 17
AngularJS Question

layout-align="center" not working Angular

I am trying to center align the Input/Edit Text in the card using the layout-align attribute. However due to my ignorance and infancy (started learning today), I am unable to figure out why the Edit Text won't get center aligned inside this card View.

<div flex="50" layout="row" layout-align="center">
<md-card flex="50">
<md-input-container layout-align="center center" class="md-block" flex="50">
<input required type="text" placeholder="Observation Number" ng-model="learningCenter.observations.obsNum" />
</md-input-container>
</md-card>
</div>


Demo here: https://codepen.io/camden-kid/pen/zBQZLW?editors=1010#0

Answer

According to the material guideline, you need to place the input-container in a row element,

<md-card flex="50">
    <div layout="row" layout-align="center center">
        <md-input-container  flex="50">
            <input required type="text" placeholder="Observation Number" ng-model="learningCenter.observations.obsNum" />
        </md-input-container>
    </div>
</md-card>

DEMO

Comments