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

It's that .mat-form-field.mat-form-field in the css that's causing an issue. As soon as I removed that, I could control the widths with .input-full-width width setting. I set up a demo here: StackBlitz.com

{{title}}

  

    
      
      Enter a unique name.
    
    
      
      You should describe the purpose/use of this thing.
    
  

.form-full-width {
    min-width: 150px;
    max-width: 500px;
    width:100%;
}

.input-full-width {
    width:800px;
}

/* .mat-form-field.mat-form-field {
    width: auto;
} */