title: angular 5 material - form fields stuck at 180px
body: <p>I've created a form in a dialog using material forms, but I can't seem to get the inputs to be wider than 180px despite following numerous examples including <a href="https://material.angular.io/components/input/example" rel="noreferrer">https://material.angular.io/components/input/example</a>.</p>
  <p>I'm sure this is a pretty standard CSS thing, but I don't have that sort of brain so I cant figure out the problem.</p>
  <p>Does anyone have a serious / non-trivial example that works??</p>
  <p>Here's mine:</p>
  <pre><code>&lt;h1 mat-dialog-title&gt;{{title}}&lt;/h1&gt;
  &lt;mat-dialog-content&gt;
    &lt;form novalidate #f=&quot;ngForm&quot; class=&quot;form-full-width&quot;&gt;
      &lt;mat-form-field class=&quot;input-full-width&quot;&gt;
        &lt;input type=&quot;text&quot; [(ngModel)]=&quot;data.name&quot; name=&quot;name&quot; matInput placeholder=&quot;Name&quot;&gt;
        &lt;mat-hint&gt;Enter a unique name.&lt;/mat-hint&gt;
      &lt;/mat-form-field&gt;
      &lt;mat-form-field class=&quot;input-full-width&quot;&gt;
        &lt;textarea [(ngModel)]=&quot;data.description&quot; name=&quot;description&quot; matInput placeholder=&quot;Description&quot;&gt;&lt;/textarea&gt;
        &lt;mat-hint&gt;You should describe the purpose/use of this thing.&lt;/mat-hint&gt;
      &lt;/mat-form-field&gt;
    &lt;/form&gt;
  &lt;/mat-dialog-content&gt;
  </code></pre>
  <p>CSS :</p>
  <pre><code>.form-full-width {
      min-width: 150px;
      max-width: 500px;
      width:100%;
  }
  
  .input-full-width {
      width:800px;
  }
  
  .mat-form-field.mat-form-field {
      width: auto;
  }
  </code></pre>
  <p>Thanks.</p>