CODEWITHSUNDEEP
vue.jstemplatesfrontendvuetify.jsv-select
lasnico37
lasnico37

Reputation: 61

VueJs & Vuetify - V-select outlined

I'm new to VueJS and Vuetify. V-select outlined the label is not placed directly on the border of the field. I have to click in this one first, why ?

My code :

<template>
  <v-row>
    <v-col
      cols="12"
    >
      <v-card color="white" variant="elevated">
        <v-form id="frmFilter" class="ma-md-3">
          <v-row class="ma-2 ga-3">
            <v-select
              label="Organismes"
              :items=items
              multiple
              variant="outlined"
              density="compact"
            ></v-select>
              <v-btn density="comfortable" type="submit" color="light-blue-darken-4">Filtrer</v-btn>
              <v-btn density="comfortable" type="submit">Réinitialiser</v-btn>
          </v-row>
        </v-form>
      </v-card>
    </v-col>
  </v-row>
</template>
<script>
export default {
  name: 'App',
  data: () => ({
    items: ['Blue', 'Red', 'Yellow', 'Green'],
  }),
};
</script>

It gives that : v-select

thank you for your feedback

Upvotes: -1

Views: 307

Answers (2)

Adri
Adri

Reputation: 365

As explained by Moritz this is the intended position of the label, but you can use active prop :

<v-select
        label="Organismes"
        :items="items"
        multiple
        variant="outlined"
        density="compact"
        active
    ></v-select>

Upvotes: 0

Moritz Ringler
Moritz Ringler

Reputation: 15931

Vuetify implements the Material Design specifications, and looking at the specification of outlined input fields, you can see that label positions are defined as you describe:

enter image description here

Upvotes: 0

Related Questions