плавающая метка и заполнитель перекрываются - PullRequest
Новая
       9

плавающая метка и заполнитель перекрываются

0 голосов
/ 22 декабря 2018 
<div class="form-group form-default form-spacing">
     <input class="form-control" placeholder="Name" type="text" required>
     <span class="form-bar"></span>
     <label class="float-label">Name</label>
</div>

enter image description here

здесь css, 

.form-material {
    .form-group {
        position: relative;

        &.form-static-label .form-control {
            ~.float-label {
                top: -14px;
            }
        }
    }

    .form-control {

        &:focus {
            border-color: transparent;
            outline: none;
            box-shadow: none;

        }

        &:focus,
        &:valid {
            ~.float-label {
                top: -14px;
            }
        }
    }

, если я фокусируюсь на текстовом поле, он работает нормально.но когда нет фокуса, он перекрывается.асдасд дасд дасдсад ад асд дас дасд асд дас

Ответы [ 2 ]

0 голосов
/ 23 декабря 2018

попробуйте, пожалуйста:

npm install - сохранить @ angular / material @ angular / cdk @ angular / animations

в app.module.ts: 

import {MatFormFieldModule} from '@angular/material/form-field';

html: 

<form [formGroup]="addressForm" novalidate (ngSubmit)="onSubmit()">
  <mat-card class="shipping-card">
    <mat-card-header>
      <mat-card-title>Address, Neighborhood or ZIP</mat-card-title>
    </mat-card-header>
    <mat-card-content>

      <div *ngIf="hasUnitNumber">
        <div class="col">
          <mat-form-field class="full-width">
            <textarea matInput placeholder="first Name" formControlName="firstName"></textarea>
          </mat-form-field>
        </div>
      </div>

    </mat-card-content>
    <mat-card-actions>
      <button mat-raised-button color="primary" type="submit">Submit</button>
    </mat-card-actions>
  </mat-card>
</form>

CSS: 

.full-width {
  width: 100%;
}

.shipping-card {
  min-width: 120px;
  max-width: 620px;
  margin: 20px auto;
}

.mat-radio-button {
  display: block;
  margin: 5px 0;
}

.row {
  display: flex;
  flex-direction: row;
}

.col {
  flex: 1;
  margin-right: 20px;
}

.col:last-child {
  margin-right: 0;
}

Машинописный компонент: 

export class MyFormComponent {

addressForm = this.fb.group({
    firstName: [null, Validators.required],
  });

hasUnitNumber = false;

constructor(private fb: FormBuilder) {}

  onSubmit() {
    alert('Thanks!');
  }
}
0 голосов
/ 22 декабря 2018 
<div>
  <mat-form-field appearance="legacy">
    <mat-label>Legacy form field</mat-label>
    <input matInput placeholder="Placeholder">
  </mat-form-field>
</div>

Вы можете попробовать этот код, используя угловой материал, который вы можете просто решить такого рода проблемы.

...