浮动标签和占位符重叠

Posted 2023-02-22

【中文标题】浮动标签和占位符重叠

【英文标题】：floating label and placeholder overlapping

【发布时间】：2019-05-22 11:17:13

【问题描述】：

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

这里是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;
            
        
    

如果我专注于文本字段，它工作正常。 但是当没有焦点时，它会重叠。 asdasd dasd dasdsad ad asd das dasd asd a das

【问题讨论】：

top: -9px 你能这样试试吗？随便玩玩吧。

@PyaePhyoeShein 然后它会在我专注时反映出来，反之亦然

【参考方案1】：

请务必将材质主题 css 文件添加到 angular.json 文件中的样式部分。

示例（参见indigo_pink.css 行）：

"styles": [
  "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],

这个问题在我身边引起了问题

【参考方案2】：

请试试这个：

npm install --save @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;

Typescript 组件：

export class MyFormComponent 

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

hasUnitNumber = false;

constructor(private fb: FormBuilder) 

  onSubmit() 
    alert('Thanks!');