试图从调整对话框

Question

只是试图建立与角料一个简单的登录表单停止与图标浮动对话框内角材料输入容器ANS到目前为止，我得到这个：

<md-dialog aria-label="Login"> 
<form name="loginForm"> 
    <md-toolbar layout="row" layout-padding layout-align="center center"> 
     <span class="md-toolbar-item md-headline">Login</span> 
    </md-toolbar> 
    <md-dialog-content layout-padding> 
     <md-input-container class="md-icon-float"> 
      <md-icon class="md-dark" aria-label="username">person</md-icon> 
      <input type="text" ng-model="user.name" placeholder="Username"> 
     </md-input-container> 
     <md-input-container class="md-icon-float"> 
      <md-icon class="md-dark" arial-label="password">lock</md-icon> 
      <input type="text" ng-model="user.password" placeholder="Password"> 
     </md-input-container> 
    </md-dialog-content> 
    <div class="md-actions"> 
     <md-button aria-label="Cancel">Cancel</md-button> 
     <md-button class="md-primary" aria-label="Login">Login</md-button> 
    </div> 
</form> 

产生这样的：

现在，当我把密码输入活跃，和小标签浮了上来，这是调整耳鼻喉科激怒对话并将用户名字段向上推。这是一个小的抱怨，我知道，但并不都不好看，我敢肯定，这一定是东西真是小巫见大巫（我的CSS是目前正在进行的工作）

欢呼

Answer 1

如果有人可能会面临这样的问题，多少时间后，我居然发现了问题：

md-input-container.md-icon-float { 
    margin-top: -16px; 
    transition: margin-top 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); 
} 

的唯一原因这只是发生的对话框（密码字段）在第二输入容器上是

md-dialog md-dialog-content:not([layout=row]) > *:first-child:not(.md-subheader) { 
    margin-top: 0; 
} 

所以在MD-对话框的内容的第一元件不会受到影响。

我困惑，需要对这一转变（发行2991还引用他们的回购反正

您可以在MD-输入容器上插入一个内嵌样式，

<md-input-container class="md-block md-icon-float md-icon-left" style="margin-top: 0;"> 
      <md-icon class="md-dark" arial-label="password">lock</md-icon> 
      <input type="password" ng-model="user.password" placeholder="Password"> 
      <div class="md-errors-spacer"></div> 
</md-input-container> 

或将每个MD-输入容器元素在一个单独的MD-对话框的内容（不知道这是真的使用MD-对话框的内容预期的方式，所以我去的第一个解决方案）

希望这帮助某人，真正的小问题，但约n为nitpicky浪费了很多时间。

Answer 2

Here's a pen 你可以检查出来

<md-dialog aria-label="Dialog Example" style="height:400px;width:400px;"> 
    <md-toolbar> 
    <div class="md-toolbar-tools"> 
    <h2>Login</h2> 
    <span flex></span> 
    <md-button class="md-icon-button" ng-click="cancel()"> 
     <md-icon class="material-icons" aria-label="Close dialog">close</md-icon> 
    </md-button> 
    </div> 
</md-toolbar> 
    <form layout="row"> 
    <span flex></span> 
     <div layout="column"> 
     <div> 
      <md-input-container> 
       <label>UserName</label> 
       <md-icon class="material-icons">person</md-icon> 
       <input type="text" ng-model="somemodel" autocomplete="off"> 
      </md-input-container> 
     </div> 
     <div> 
      <md-input-container> 
       <label>UserName</label> 
       <md-icon class="material-icons">lock</md-icon> 
       <input type="password" ng-model="some"> 
      </md-input-container> 
     </div> 
     <md-button class="md-primary md-raised"> 
      Login 
      </md-button> 
    </div> 
    <span flex></span> 

</form>