この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Vuetifyのフォームコンポーネントには余白がある
VueのUIフレームワークとしてよく使われているVuerify。 便利なので私のプロジェクトでも使っているのですが、TextFieldコンポーネントの下記のような謎の余白に悩まされていました。
余白にはわかりやすくグレーの色をつけてあります。 この余白は、エラーメッセージが表示される枠を事前にコンポーネントが確保していることによるものです。
Vuetifyのフォームの余白を消す方法
この余白が不要な場合は、下記のように hide-details="auto" オプションを追加することで余白を消すことができます。
hide-details オプションは、ヒントやエラーメッセージの表示を制御できるオプションです。
hide-details オプションの注意点
hide-details = "true" とすると、エラーメッセージを全く表示させないようにすることも可能です。その場合、エラーのときはフォームの色が変わるだけになります。
下記が意図的にエラーを発生させている状態の、 hide-details = "auto" と hide-details = "true" のそれぞれの表示です。
エラーが発生していても、メッセージが表示されていないことがわかります。 エラーを表示させたい場合は注意するようにしましょう。