需要覆盖CSS

Question

我遇到了一个简单的调整，即保留我的自动填充输入的mat-form-field的问题。从图像中可以看到它是否超出了垫子工具栏的高度，但是我还没有找到一种简单的方法来调整整个输入的高度，以便它可以停留在工具栏区域内。宽度工作正常。高度没有。

我的html代码如下：

 <mat-toolbar  >
      <span style="width:200px">Test</span>
         <label>{{prodPointId}}</label>
        <form class="example-form"  >
            <mat-form-field  appearance="outline"  margin=" 10px" class="example-full-width searchField" >
                <mat-label>Search...</mat-label>

              <input type="text"   matInput [formControl]="myControl" [matAutocomplete]="auto" [(ngModel)]="value" >
              <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
                  <mat-icon>close</mat-icon>
                </button>
              <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
                <mat-option  
                    *ngFor="let option of filteredOptions | async" 
                    [value]="option.prodPointName" 
                    (click)="pointSelected(option.prodPointId)" 
                    [routerLink]="['/coredata', option.prodPointId]" >
                    <mat-icon>home</mat-icon>
                    {{option.prodPointCode}} : {{option.prodPointName}} 
                </mat-option>
              </mat-autocomplete>              
            </mat-form-field>
          </form>                  
  </mat-toolbar>

当我拉起chrome开发工具时，我尝试使用div.mat-form-field和其他几个选项来调整CSS在组件中的高度，但似乎没有任何效果。在查看Angular Material的文档时，我没有发现任何东西可以向我展示如何控制这种简单的样式调整。我想念什么。它是如此简单，我只是想得太多吗？谢谢！

Answer 1

需要覆盖CSS

   <div class="mat-form-field-infix">
    <input class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored" ma

tinput="" placeholder="Enter First name" 
ng-reflect-placeholder="Enter First name" id="mat-input-0" aria-describedby="mat-hint-0" aria-invalid="false" aria-required="false">
<span class="mat-form-field-label-wrapper">
<label class="mat-form-field-label id="mat-form-field-label-1" for="mat-input-0" aria-owns="mat-input-0">
<mat-label _ngcontent-nbv-c4="" class="ng-star-inserted">First Name</mat-label>
</label>
</span>
</div>

样式覆盖

.mat-form-field-appearance-outline .mat-form-field-infix {
   padding: 10px;
}
.mat-form-field-infix {
     padding:0;
     border-top: 0;
}

//change top and padding-top as per required

.mat-form-field-label-wrapper {
    top: -0.84375em;
    padding-top: 0.84375em;
}

调整垫形场角材料的高度

1 个答案:

需要覆盖CSS