vuetify.js v-最小の高さ制限を選択しますか？

debugcn 投稿 Dev

サイドム

下からわかるように、v-select要素の高さを下げようとしていますが、設定できる最小の高さに制限があるようです。つまり、その後height = 40、高さをさらに下げることはもはや機能しないようです。この要素を小さくできるように、この制限を囲む方法はありますか？比較的小さなdivに収める必要があるため、これが必要です。前もって感謝します -

new Vue({
  el: "#app",
  data: {
    years: [2015, 2016, 2017, 2018]
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div id="app">
<v-app>
  <v-layout row>
      <v-select
        label="height=80"
        outline
        height="80"
        :items="years">
      </v-select>
      <v-select
        label="height=60"
        outline
        height="60"
        :items="years">
      </v-select>
      <v-select
        label="height=40"
        outline
        height="40"
        :items="years">
        </v-select>
      <v-select
        label="height=20"
        outline
        height="20"
        :items="years">
      </v-select>
  </v-layout>
</v-app>
</div>

Boussadjra Brahim

成分である次のCSS規則によって定義されます。min-heightv-select56px

     .v-text-field--box .v-input__slot, .v-text-field--outline .v-input__slot{
       min-height:56px;
     }

たとえば、次のように設定してオーバーライドしましょう。

  .v-text-field--box .v-input__slot, .v-text-field--outline .v-input__slot{
   min-height: auto!important;
  }

しかし、結果は完全ではなく、コンテンツが適切に配置されていません。これを修正するために、上記のルールに次のプロパティを追加します。

  display: flex!important;
  align-items: center!important

new Vue({
  el: "#app",
  data: {
    years: [2015, 2016, 2017, 2018]
  }
})

.v-text-field--box .v-input__slot,
.v-text-field--outline .v-input__slot {
  min-height: auto!important;
  display: flex!important;
  align-items: center!important;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.7/vuetify.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div id="app">
  <v-app>
    <v-layout row>
      <v-select label="height=80" outline height="80" :items="years">
      </v-select>
      <v-select label="height=60" outline height="60" :items="years">
      </v-select>
      <v-select label="height=40" outline height="40" :items="years">
      </v-select>
      <v-select label="height=20" outline height="20" :items="years">
      </v-select>
    </v-layout>
  </v-app>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]