[Vuejs]-How do I set the distance between the language with the menu icon down in select?

by

1👍

✅

Give .v-select__selection--comma width: 100% and text-align: right and all languages will have the same distance from the dropdown icon, or use terxt-align: center if you want the text to be right between the icons

.v-select__selection--comma {
  width: 100%;
  text-align: right;
}

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      e1: 'Indonesia',
      states: [
        'Indonesia', 'English',
      ],
    }
  },
})
Vue.config.productionTip = false
.custom .v-input__slot::before,
.custom .v-input__slot::after {
  border: none!important
}

.v-select__selection--comma {
  margin: 7px 4px 7px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  text-align: right;
}
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.1.15/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.1.15/dist/vuetify.min.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-row align="center">
        <v-col cols="10">
          <v-subheader>Logo</v-subheader>
        </v-col>
        <v-col cols="2" align="right">
          <div style="width:139px;">
            <v-select v-model="e1" :items="states" menu-props="auto" label="Select" hide-details prepend-icon="language" single-line class="custom"></v-select>
          </div>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>
👤Ram Segev

0👍

Add this css to your css file , hope it will help you . because of display flex property it wasn’t center . Tested it through your codepen, Hope it will work. Let me know if not works.

.v-select__selections {
    align-items: center;
    display: initial;
    flex: 1 1;
    flex-wrap: wrap;
    text-align: center;
    line-height: 18px;
    max-width: 100%;
    min-width: 0;
}
👤Salman Abir

Leave a comment