1. ホーム
  2. html

[解決済み] Angular mat-form-fieldのwidth:100%を設定する方法

2022-03-04 04:28:38

質問

AngularとNodejsの学習の一環として、登録フォームを作成しています。 私のフォームは幅が広く見えますが、このフォームのフィールドは狭いか薄いように見えます。コンテナタグに直接Width:100%を設定しようとしましたが、うまくいきません。

cssタグを使用して、これらのフィールドすべてにwidth:100%を設定するにはどうすればよいですか?

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>

解決方法は?

これは問題なく動作します。

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

ライブデモ