6

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

enter image description here

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!

Hien Nguyen
  • 24,551
  • 7
  • 52
  • 62
GlitchEclipse
  • 77
  • 1
  • 1
  • 13
  • 1
    A stackblitz demo might help. – KiraAG Jan 09 '19 at 03:08
  • 2
    You can adjust the height of .mat-form-field-flex to control the size of the "box", but then you'll notice that the inside parts of the field don't line up because the font size is too large. You can change that too, but alignment is not ideal and the font is probably smaller than you would like. It's not designed to be changed from the Material Design standard (IMO they did a poor job with this - they attempted to make it 'flexible' but actually made it difficult to control), so ultimately it would take an extreme hack (probably prone to inconsistency) to make this work if at all possible. – G. Tranter Jan 09 '19 at 16:15

2 Answers2

2

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;
}
Community
  • 1
  • 1
Rahul Kathar
  • 45
  • 1
  • 5
0

I had a similar issue and found the answer on this other thread with the answer of Neistow: How to change height in mat-form-field

You can use density to reduce the height of the mat-form-field while keeping all the right behaviors. Add this to your styles.scss:

.dense-2 {
  @include mat.all-component-densities(-2);
}

And give that class to the mat-form-field in your html code:

<mat-form-field class="dense-2" ... >

More info about density: https://material.angular.io/guide/theming#customizing-density

I know this question is 4 years old, but maybe someone else, like me, would stumble upon this thread and not the other one first.

Timothée Emery
  • 1