Angular mat-form-field how to set width:100% : <p>I create a registration form as part of my learning Angular and Nodejs.
My form looks wide and it is ok, however the fields on this form looks narrow or thin. I tried to set Width:100% direct to the container tag but didn't work.</p>

<p>How to set width:100% for all these fields using a css tag?</p>

<p>My form using angular:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;mat-card&gt;
  &lt;mat-card-header&gt;
    &lt;mat-card-title&gt;
      &lt;h4&gt;Register New User&lt;/h4&gt;
    &lt;/mat-card-title&gt;
  &lt;/mat-card-header&gt;
  &lt;mat-card-content class="register-container"&gt;
    &lt;form&gt;
      &lt;mat-form-field&gt;
        &lt;input matInput placeholder="E-mail" ng-model="data.email" type="email"&gt;
      &lt;/mat-form-field&gt;
      &lt;br /&gt;
      &lt;mat-form-field&gt;
        &lt;input matInput placeholder="Password" ng-model="data.pwd" type="password"&gt;
      &lt;/mat-form-field&gt;
      &lt;br&gt;
      &lt;mat-form-field&gt;
        &lt;input matInput placeholder="Name" ng-model="data.name" type="text"&gt;
      &lt;/mat-form-field&gt;
      &lt;br&gt;
      &lt;mat-form-field&gt;
        &lt;textarea matInput ng-model="data.description" placeholder="Leave a comment"&gt;&lt;/textarea&gt;
      &lt;/mat-form-field&gt;
    &lt;/form&gt;
  &lt;/mat-card-content&gt;
&lt;/mat-card&gt;</code></pre>
</div>
</div>
</p>
