Angular material 6.2.1 "mat-form-field-infix" overwrite width

Question

How to overwrite default width 180px in mat-form-field-infix without custom CSS

<mat-form-field fxFlex>
  <mat-select>
    <mat-option>{{ option.test}}</mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field fxFlex>
  <input matInput>
</mat-form-field>

full screen output

But small screen display horizontal scrollbar

stack

"@angular/cdk": "^6.2.1",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/flex-layout": "^6.0.0-beta.16",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/material": "^6.2.1",

Thanks

Answer 1

In my solution I am using an ElementRef to override the width of the mat-form-field-infix:

   <mat-form-field
       #field
   </mat-form-field>

Then in the component:

@ViewChild('field', { read: ElementRef }) field: ElementRef;

ngOnInit() {
    var el = this.field.nativeElement.querySelector('.mat-form-field-infix');
    el.style.width = 'auto';
}

I think altough this does not meet your requirment 'without custom css'. But maybe this can be helpfull for you.

Answer 2

The closest i've found is to use a style binding for the form field:

 <mat-form-field appearance="outline" [style.width.px]="200">

otherwise it's using the old approach of custom css.... like so:

add the attribute class="datepicker" to your <mat-form-field> and in your css do

.datepicker {width:200px;}

I'm having a similar problem with one of my form fields being larger than the rest and that's what I did to solve it. See the date picker form field here stack blitz: