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

Question

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

]

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

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

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

这是我的模态模板html：

    <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>

在我的组件中，

constructor(private matDialog:MatDialog){}

  openModal(templateRef: TemplateRef<any>){
    const dialogRef=this.matDialog.open(templateRef,
    {
      width: '400px',
    });
  }

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>

Answer 2

使用此角度弯曲布局click here并获得结果