angular 5 material - form fields stuck at 180px

Question

Ive create a form in a dialog using material forms but I cant seem to get the inputs to be wider than 180px despite following numerous examples including https://material.an

Answer 1

Seems like it's something to do with View Encapsulation. This thread explains it: https://github.com/angular/material2/issues/4034 but changing encapsulation for the component causes all sorts of compile failures.

This article gave me the correct solution:https://material.angular.io/guide/customizing-component-styles

I'll move my style to global scope...

.formFieldWidth480 .mat-form-field-infix {
   width: 480px;
}

and in the component that opens the dialog:

this.newDialog = this.dialog.open(NewDialogComponent,
  {
    width: '650px', height: '550px',
    data : newThing,
    panelClass : "formFieldWidth480"
  });

I hope this saves someone else the day I lost...