【Vuetify】v-selectタグの下にある謎の余白を非表示にする方法を解説します。

なやむくん

v-selectタグの下にある余白が邪魔くさい…。

なやむさん

CSSで非表示にするのではなく、Vuetifyコンポーネントのオプションでどうにかならない？

などの疑問や悩みを解決してまいります。

Vuetifyは、Vue.jsに対応したUIライブラリで、高機能なコンポーネントを簡単に実装できてしまう便利さが魅力的です。

そのうちの1つにv-selectタグが用意されています。

v-selectタグは、Webページにセレクトボックスを実装するコンポーネントですが、下に謎の余白がありこちらを非表示にしたい方も多いのではないのでしょうか。

今回はv-selectタグの実装時に下に表示される謎の余白の非表示の方法について解説していきます。

Vuetifyを導入されていない方は以下記事を参考にしてください。

謎の余白の正体について

実装に謎の余白とは何なのか説明していきます。

<template>
  <v-select
    label="Select"
    :items="['選択肢①', '選択肢②', '選択肢③', '選択肢④', '選択肢⑤', '選択肢⑥']"
  ></v-select>
</template>

v-selectタグは上記の記述のみで以下のようにセレクトボックスが簡単に実装することができます。

よろこびくん

素晴らしいですね！

しかし、検証ツールで見てみると以下のように謎の余白があるのが分かります。

検証ツールを見たらわかるのですが、確認してみるとセレクトボックスのすぐ下にv-input__detailsクラスという謎の要素があります。

これが謎の余白の正体です。

なやむくん

これはいったい何のためにある要素なんでしょうか。

みつた

これから説明していきますね。

正体はフォームタグのバリデーション要素

結論から説明しますと、Vuetifyで用意されているフォーム関連のコンポーネントについてくるバリデーション要素の余白になります。

つまりこのv-input__detailsクラス内にバリデーションの内容が表示される仕組みになっています。

例で別のフォームタグを用意しましたので以下を見てください。

<template>
  <v-text-field
    :rules="rules"
    hide-details="auto"
    label="文字を入力してください。"
  ></v-text-field>
</template>

<script setup lang="ts">
const rules = [
  (value:string) => !!value || "必須項目です。",
  (value:string) => (value && value.length >= 3) || "Min 3 characters",
];
</script>

こちらもVuetifyで用意されているコンポーネントであり、上記のコードで以下のフォームを実装することができます。

フォームの下にバリデーションのテキストが表示されているかと思います。

こちら検証ツールで確認してみましょう。

すると、v-input__detailsクラス内にバリデーションの内容が表示されていることが分かったかと思います。

このようにフォームに関するコンポーネント全般にこのv-input__detailsクラスが設けられています。

謎の余白の非表示にする方法について

それではこちらの余白を非表示にする方法を解説していきます。

hide-details="auto"オプションを追加する

v-selectタグ内にhide-details="auto"オプションを追加するだけで非表示にすることができます。

<template>
  <v-select
    label="Select"
    :items="['選択肢①', '選択肢②', '選択肢③', '選択肢④', '選択肢⑤', '選択肢⑥']"
    hide-details="auto" // 追記するコード
  ></v-select>
</template>

元々あったv-input__detailsクラスが<!---->に置き換わったのが分かると思います。

これで非表示にすることができました。

display: none;を指定する

CSSで非表示にすることも可能です。

<style>
.v-input__details {
  display: none;
}
</style>

これだけでも非表示にできますが、Vuetifyで完結できる部分についてはVuetify側で制御してあげるようにしましょう。

まとめ

ここまで読んでくださりありがとうございました。

本記事のまとめです。