时间戳

首页 > 解决方案 > 当我们在 FLEX LAYOUT 的 fxFlex 中使用时，角度材料日期选择器宽度太长

javascript - 当我们在 FLEX LAYOUT 的 fxFlex 中使用时，角度材料日期选择器宽度太长

问题描述

在此处输入图像描述我面临一些 mat-date-picker 元素的宽度问题，问题是当我在 flex 布局中使用 mat-form-field 进行正常输入时，对齐是可以的。但是当我使用与 mat-date-picker 相同的 mat-form-field 时，对齐不正确，我无法修复它。任何帮助，将不胜感激。

日期选择器.html

<div fxFlex="100">
  <div fxFlex="40">
    <div fxLayout="row" fxLayoutAlign="space-between center">
      <div>
        <mat-label>COURSE TITLE </mat-label>
      </div>

      <div>
        <mat-form-field appearance="outline">
          <input matInput type="text" placeholder="COURSE TITLE" readonly>
        </mat-form-field>
      </div>

    </div>


    <div fxLayout="row" fxLayoutAlign="space-between center">
      <div>
        <mat-label>DATE PICKER </mat-label>
      </div>

      <div>
        <mat-form-field appearance="outline">
          <input matInput [matDatepicker]="picker" placeholder="CLICK TO OPEN CALENDER">
          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>
      </div>

    </div>

  </div>
</div>

我已经用谷歌搜索了很多次，但没有合适的解决方案，如果我想解决这个问题，我必须通过设置潜水宽度来手动完成，它不正确，因为为潜水设置固定宽度没有响应，对齐会不合适.in 上面的代码 fxLayoutAlign="space-between center" 负责潜水的对齐。

日期选择器.html

<div fxFlex="100">
  <div fxFlex="40">
    <div fxLayout="row" fxLayoutAlign="space-between center">
      <div>
        <mat-label>COURSE TITLE </mat-label>
      </div>

      <div>
        <mat-form-field appearance="outline">
          <input matInput type="text" placeholder="COURSE TITLE" readonly>
        </mat-form-field>
      </div>

    </div>


    <div fxLayout="row" fxLayoutAlign="space-between center">
      <div fxFlex="30">
        <mat-label>DATE PICKER </mat-label>
      </div>

      <div fxFlex="40">
        <mat-form-field appearance="outline">
          <input matInput [matDatepicker]="picker" placeholder="CLICK TO OPEN CALENDER">
          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>
      </div>

    </div>

  </div>
</div>

在上面的代码中，我使用 fxFlex 为潜水设置了宽度，在这里它工作正常但没有响应。它仅适用于笔记本电脑，如果我在 dektop 中打开相同的 UI 或选项卡对齐出错。我的问题是为什么 mat-form-field 宽度正在增加。我听说 mat-datepicker-toggle 使用 mat-form-field 链接占用了 1em 的一些额外空间（https://github.com/angular/components/issues/ 11663）。如何解决这个问题，我不想手动完成。任何帮助，将不胜感激。

标签： javascriptangularangular-flex-layoutangular-material-7

解决方案

Try this solution, I have made changes in SCSS.

This is my HTML.
<div fxFlex fxLayout.sm="column" fxLayout.xs="column" fxLayoutGap="20px" fxLayoutGap.sm="0"  fxLayoutGap.xs="0" >

  <mat-form-field fxFlex appearance="fill" class="datepicker">
    <mat-label>Updated From</mat-label> 
    <input matInput [matDatepicker]="ufrom">
    <mat-datepicker-toggle matSuffix [for]="ufrom"></mat-datepicker-toggle>
    <mat-datepicker #ufrom></mat-datepicker> 
  </mat-form-field>

  <mat-form-field fxFlex appearance="fill" class="datepicker">
    <mat-label>Updated To</mat-label> 
    <input matInput [matDatepicker]="uto">
    <mat-datepicker-toggle matSuffix [for]="uto"></mat-datepicker-toggle>
    <mat-datepicker #uto></mat-datepicker> 
  </mat-form-field>

</div>


This is my SCSS.

/* Datepicker width issue */
.datepicker { 
    .mat-form-field-flex {
        display: inherit;
    }
    .mat-form-field-prefix, .mat-form-field-suffix { 
        width: 35px;
        float: right;
        position: absolute !important;
        top: 10px;
        right: 5px;
    }
}

.mat-form-field-infix {
    width: auto !important;
}

推荐阅读