Bootstrap+Angular -> 将标签放置在正确的位置

Question

我无法将文本向右移动。

<mat-form-field class="form-control">
  <mat-label>Move this text:</mat-label>
  <input type="text" required
         placeholder=""
         aria-label="Move this text:"
         matInput
         (input) = "onValueChanged()"
         [formControl]="myControl"
         [(ngModel)]="thisVal"
         [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelect($event)" [displayWith]="displayValueName.bind(this)">
    <mat-option *ngFor="let option of options| async" [value]="valueOption" >
      {{option.name}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

它的样子：

1. 点击其他地方时：

2. 在自动完成中单击时

到目前为止我所做的最好的是：

.mat-form-field-label.ng-star-inserted.mat-empty.mat-form-field-empty{
                margin-left: 7px;
        }

结果是： 3. 所以在这里：文本“跳”到左边。 4. 5.

我的问题是在屏幕 3 和 5 上设置“移动此文本”标签。没有第 4 个屏幕行为。 仅当：area-expanded=false 且不专注于输入时。

你知道怎么做吗？

Answer 1

兄弟姐妹...

input.mat-input-element[aria-expanded="false"]~span label.mat-form-field-empty {
  margin-left: 10px;
}