调整 mat-form-field Angular Material 的高度 [英] Adjusting height of mat-form-field Angular Material

问题描述

我遇到了一个问题，即对包含我的自动完成输入的 mat-form-field 进行简单调整.从图像中您可以看到它是否在 mat-toolbar 高度之外，但我还没有找到一种简单的方法来调整整个输入的高度，以便它可以留在工具栏区域内.宽度工作正常.身高没有.

我的html代码如下:

 <span style="width:200px">测试</span><label>{{prodPointId}}</label><form class="example-form" ><mat-form-field appearance="outline" margin="10px" class="example-full-width searchField" ><mat-label>搜索...</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>关闭</mat-icon><mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn"><mat-option*ngFor="let 选项的filteredOptions | async"[value]="option.prodPointName"(点击)="pointSelected(option.prodPointId)"[routerLink]="['/coredata', option.prodPointId]" ><mat-icon>home</mat-icon>{{option.prodPointCode}} :{{option.prodPointName}}</mat-option></mat-autocomplete></mat-form-field></表单></mat-toolbar>

当我打开 chrome 开发工具时，我尝试使用 div.mat-form-field 和其他几个选项调整组件的 CSS 高度，但似乎没有任何效果.查看 Angular Material 的文档，我没有找到任何可以告诉我如何控制这种简单样式调整的内容.我错过了什么.是不是这么简单，我只是想多了?谢谢！

解决方案

需要覆盖css

 
<input class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored";嘛输入="placeholder =输入名字"ng-reflect-placeholder=输入名字"id="mat-input-0"aria-描述的=mat-h​​int-0"；咏叹调无效=假"；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">名字</mat-label></span>

样式覆盖

.mat-form-field-appearance-outline .mat-form-field-infix {填充:10px；}.mat-form-field-infix {填充:0;边界顶部:0；}//根据需要更改顶部和填充顶部.mat-form-field-label-wrapper {顶部:-0.84375em；填充顶部:0.84375em；}

I am running into an issue with a simple adjust of a mat-form-field that holds my autocomplete input. From the image you can see if it's outside the mat-toolbar height, but I have not found a simple way to adjust the height of the entire input so it can stay inside the toolbar area. Width works fine. Height does not.

input outside toolbar

My html code is as follows:

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

When I pull up chrome dev tools I attempted to adjust the height in the CSS for the component using div.mat-form-field and several other options, but nothing has seemed to work. Looking at the documentation at Angular Material, I haven't found anything that shows me how to control this simple styling adjustment. What am I missing. Is it so simple and I just overthinking it? Thanks!

解决方案

Need to overwrite 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>

style overwrite

.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;
}

这篇关于调整 mat-form-field Angular Material 的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！