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

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>

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

How to vertically align input boxes in an Angular material dialog?

html

css

modal-dialog

angular-material

angular