Lay outing with Angular Material не отвечает как следует

Я пытаюсь создать форму входа с угловым материалом. Но я не могу показаться, чтобы получить желаемый эффект, который ->http://gyazo.com/d31f624204524d8b1b6349c89b237be1 Lay outing with Angular Material не отвечает как следует

До сих пор у меня есть это ->http://gyazo.com/0ab7343544a3c7992099c30684e062a1

Может кто-нибудь помочь мне с этой гибкой моделью коробки для скрутки пикника моего приложения

код HTML является:

<div layout="row" flex layout-padding layout-fill layout-align="center center"> 
    <div> 
     <md-card> 
      <md-toolbar> 
       <div class="padding-20 text-center"> 
        <div> 
         <img src="../images/logo.png" alt="" width="177" height="162"> 
        </div> 
        <h1 class="md-headline">Sign Up</h1> 
       </div> 
      </md-toolbar> 

      <md-card-content class="md-padding"> 
       <form name="login"> 
        <md-input-container> 
         <label for="email">Email</label> 
         <input id="email" label="email" name="email" type="email" /> 
         <div ng-messages="login.email.$error"></div> 
        </md-input-container> 

        <md-input-container> 
         <label for="password">Password</label> 
         <input id="password" label="password" name="password" type="password" /> 
        </md-input-container> 
       </form> 
      </md-card-content> 
     </md-card> 
    </div> 
</div>

мой CSS:

body{ 
    background-image: url("../images/background.png"); 
    width: 1920px; 
    height: 1080px; 
    background-repeat: no-repeat; 
    background-size: cover; 
    overflow-x:hidden; 
    overflow-y:hidden; 
} 

.padding-20 text-center{ 
    text-align: center; 
    padding: 20px; 
}

источник

2015-07-12 GY22

Вот начало

HTML

<html lang="en" ng-app="StarterApp"> 
    <head> 
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css"> 
    </head> 
    <body layout="column" ng-controller="AppCtrl"> 

    <div layout="row" flex layout-fill layout-align="center center"> 
     <div class="signup"> 
      <md-card> 
       <div class="header"> 
        <div> 
         <img src="../images/logo.png" alt=""> 
        </div> 
        <h1 class="md-headline">Login</h1> 
       </div> 

       <md-card-content class="md-padding"> 
        <form name="login"> 
         <md-input-container> 
          <label for="email">Email</label> 
          <input id="email" label="email" name="email" type="email" /> 
          <div ng-messages="login.email.$error"></div> 
         </md-input-container> 

         <md-input-container> 
          <label for="password">Password</label> 
          <input id="password" label="password" name="password" type="password" /> 
         </md-input-container> 
        </form> 
       </md-card-content> 
      </md-card> 
     </div> 
    </div> 
    <!-- Angular Material Dependencies --> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 

    <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script> 
    </body> 
</html>

Стили

.signup{ 
    width: 400px; 
    .header{ 
    text-align: center; 
    background-color: #16afca; 
    color: white; 
    } 
}

рабочего образца.

http://codepen.io/Tmeister/pen/RPJoLZ

источник

2015-07-14 00:36:39

Lay outing with Angular Material не отвечает как следует

ответ

Смежные вопросы