试图阻止 angular material 对话框内带有浮动图标的输入容器调整对话框大小

Question

只是想用 angular material 构建一个简单的登录表单，到目前为止我得到了这个：

<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

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>

Answer 2

如果有人可能遇到这个问题，经过很长时间我才真正确定了问题所在：

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-dialog-content 中的第一个元素不受影响。

我对这种过渡的必要性感到困惑（无论如何在他们的回购问题 2991 中也提到了，

您可以在 md-input-container 上插入内联样式，

<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-input-container 元素放在一个单独的 md-dialog-content 中（不确定这是否真的是使用 md-dialog-content 的预期方式，所以我选择了第一个解决方案）

希望这对某人有所帮助，这是一个非常小的问题，但对于挑剔的人来说可能会浪费很多时间。

试图阻止 angular material 对话框内带有浮动图标的输入容器调整对话框大小

Trying to stop angular material input container with icon float inside dialog from resizing the dialog

css

angularjs

angular-material

mddialog