'Angular mat-form-field how to set width:100%

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.

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

My form using angular:

<mat-card>
  <mat-card-header>
    <mat-card-title>
      <h4>Register New User</h4>
    </mat-card-title>
  </mat-card-header>
  <mat-card-content class="register-container">
    <form>
      <mat-form-field>
        <input matInput placeholder="E-mail" ng-model="data.email" type="email">
      </mat-form-field>
      <br />
      <mat-form-field>
        <input matInput placeholder="Password" ng-model="data.pwd" type="password">
      </mat-form-field>
      <br>
      <mat-form-field>
        <input matInput placeholder="Name" ng-model="data.name" type="text">
      </mat-form-field>
      <br>
      <mat-form-field>
        <textarea matInput ng-model="data.description" placeholder="Leave a comment"></textarea>
      </mat-form-field>
    </form>
  </mat-card-content>
</mat-card>
htmlangularmaterial-design


Solution 1:[1]

This works just fine.

mat-form-field {
  width: 100%;
}

Live demo

Solution 2:[2]

You can do something like this also.

  <mat-form-field [style.width.%]="100"></mat-form-field>

And this would also help to conditionally set a style value depending on a property of the component.

 <mat-form-field [style.width.%]="fullWidth? '100' : '50'"></mat-form-field>

Solution 3:[3]

While mat-form-field selector is valid and it works just fine, SonarQube and other code quality tools will issue a warning on custom selectors.

My suggestion is to hook the form fields by its class name instead of component tag

.mat-form-field{ width: 100%; }

Solution 4:[4]

If you use flexLayout you can do it simply setting the size you want by using fxFlex like below code:

 <mat-form-field appearance="outline" fxFlex="40"></mat-form-field>

Solution 5:[5]

I used to have the same issue and this was my way to solve it.

  1. Use an identifier for the container of the fields you want to edit. For example I will use the word sopi.
    <mat-card id="sopi">
      <mat-card-header>
        <mat-card-title>
          <h4>Register New User</h4>
        </mat-card-title>
      </mat-card-header>
      <mat-card-content class="register-container">
        <form>
          <mat-form-field>
            <input matInput placeholder="E-mail" ng-model="data.email" type="email">
          </mat-form-field>
          <br />
        </form>
      </mat-card-content>
    </mat-card>
  1. Then use the identifier to be more specific in the css rule and change the mat-form-field width attribute to 100%.
    #sopi mat-form-field {
      width: 100%;
    }

This way the rule will only apply to the container identified as sopi and the input will be set to 100%.

Solution 6:[6]

This worked for me

mat-form-field{
  display: block;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tomasz Kula
Solution 2 rrr
Solution 3 n1kkou
Solution 4 MJ X
Solution 5 Pizaranha
Solution 6 Mustafa

Related Questions