如何在Angular材质对话框中垂直对齐输入框？

Question

我有一个对话框，该对话框中有两个输入字段以及“取消”和“提交”按钮。这是我的盒子的样子：

]

输入字段在水平方向上彼此相邻，我真的希望它们在垂直方向上彼此堆叠。

单击此按钮时，我的模式弹出窗口将打开：

childView.setTranslationX((Math.abs(endX) * scales));
childView.setTranslationY((Math.abs(endY) * scales));

这是我的模式模板html：

    <button class="regular dashboardButtonUI" (click)="openModal(updateModalTemplate)"> Update Task </button>

在我的组件中，

    <ng-template #updateModalTemplate>

      <input id="dashboardOldLabels" type="text" readonly=true class="regular h2">
      <input id="dashboardNewLabels" type="text" placeholder="expand the specification here" class="regular h2" >

          <div style="text-align: center;">
          <button mat-button mat-dialog-close class="regular h2 templateDisagreeButton" style="margin-top: 20px; margin: 30px" > Cancel </button>
          <button (click)="delete(task.id)" mat-button mat-dialog-close class="regular h2 templateAgreeButton" style="margin-top: 20px; margin: 30px;"> Update </button>
          </div>

    </ng-template>

Answer 1

根据使用css，scss，诸如flex-layout之类的库等方式，您可以采用多种方法来处理这些情况，但是这些都可以归结为基本的CSS。

一种方法是在输入中添加父项，并告诉div如何放置其子项。

<div style="display: flex; flex-direction: column">
  <input id="dashboardOldLabels" type="text" readonly=true class="regular h2">
  <input id="dashboardNewLabels" type="text" placeholder="expand the specification here" class="regular h2">
</div>

如果您想使输入居中，则还可以通过添加align-items: center;来使div（垂直列）使子级在辅助轴（水平行）上居中。

<div style="display: flex; flex-direction: column; align-items: center;">
  <input id="dashboardOldLabels" type="text" readonly=true class="regular h2">
  <input id="dashboardNewLabels" type="text" placeholder="expand the specification here" class="regular h2">
</div>

More details about flex and its capabilities

在这种情况下，我个人使用flex-layout。基本上，它为您提供了大量指令，使他们能够创建弹性容器并控制模板的行为，而无需手动编写CSS。

这就是使用flex-layout的样子

<div fxLayout="row">
    <div fxLayout="column">
      <input id="dashboardOldLabels" type="text" readonly=true class="regular h2">
      <input id="dashboardNewLabels" type="text" placeholder="expand the specification here" class="regular h2">
    </div>
</div>