[解決済み] 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%;
}
関連
-
[解決済み] CSSのホバー効果が私のコードで機能しない
-
[解決済み] span with onclick event inside the tag
-
[解決済み] ボディの背景色が表示されない?
-
[解決済み] CSSでulのインデントを削除する
-
[解決済み] ionic 4でion-buttonをセンタリングする方法は?[重複しています]
-
[解決済み] What is the difference between <p> and <div>?
-
[解決済み] HTMLのバックスペース
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] mat-form-field は MatFormFieldControl を含まなければなりません.
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
js プログラミング共通のエラーです。Uncaught TypeError。XXXは関数ソリューションではありません
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] CSS "margin: 0 auto" が中央揃えにならない
-
[解決済み] span with onclick event inside the tag
-
[解決済み] HTMLの#記号の文字実体は?
-
[解決済み] CSSでulのインデントを削除する
-
[解決済み] HTMLのテーブルを部分的に透明にするには?
-
[解決済み] css画像が表示されない
-
[解決済み] type="application/x-shockwave-flash "で表示可能な形式は?
-
[解決済み] フロートされた子 div の高さを親の高さに拡張するにはどうすればよいですか?