[Vuejs]-How to align list items with vuetify (1.5)

1👍

This might help your case . Wrapping your list tiles in a grid display can fix the alignment.

codepen

<div id="app">
  <v-app id="inspire">
      <v-select
        v-model="value"
        :items="items"
        label="Select Item"
        clearable hide-selected single-line
        ref="test">
    <template v-slot:item="{ item }">
     <div class="test"> 
      <v-list-tile>
        <v-list-tile-content>
          <v-list-tile-title> 
            #{{ item.question_id }}
          </v-list-tile-title>
          <v-list-tile-sub-title>
            {{ item.total }}
          </v-list-tile-sub-title>
        </v-list-tile-content>
      </v-list-tile>
      <v-list-tile>
        {{item.question_title}}
      </v-list-tile>
      </div>
    </template>
    <v-divider></v-divider>
      </v-select>
  </v-app>
</div>
....
<style scoped>
.test {
 display: grid;
 grid-template-columns: 200px 1fr;
 text-align: left;
}
</style>

Leave a comment