How to align list items with vuetify (1.5)

Question

Our app uses vuetify for styling which for the most part is very good, I have come across something which I should not be spending this much time figuring out. Basically the issue is when using a scoped item . slot to customize items shown from a v-select it works great if all the items are the same size (as is the case in the docs, the trouble begins when the items are not the same size. Here is my code:

<v-flex sm5>
  <v-select :items="evaluatedQuestions" @input="onQuestionSelected" :label="Select Questions..." item-text="display"
    item-value="question_id" clearable hide-selected single-line
    :menu-props="{'max-width': 716.4, 'allow-overflow': true}" ref="test">
    <template v-slot:item="{ item }">
      <v-list-tile class="pa-0 question-dd">
        <v-list-tile-content class="pa-0">
          <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>
        <!-- <v-flex sm10> -->
        {{item.question_title}}
        <!-- </v-flex> -->
      </v-list-tile>
      <!-- <v-list-tile>
        <v-divider class="px-2" vertical></v-divider>
      </v-list-tile>
      <v-list-tile-avatar>
        &lt;!&ndash; {{item.question_title}}&ndash;&gt;
      </v-list-tile-avatar> -->
    </template>
    <v-divider></v-divider>
  </v-select>
</v-flex>

Here is a screenshot of what this looks like:

Things I tried:

Putting everything in a . layout and creating v-flex which take a set amount of the grid.
Injecting classes in places where I don't have access (sadly v-list is not exposed as you can see
Adding a class "question-dd" with a max-width to set the size of the first list item, unfortunately the surrounding elements determince the size.
Bottom line is that the v-list items resize based on their size and do not align well when they differ in size, how can I get this to look aligned where the two data pieces in the first list items align with the second list item regardless of their size?

Did you try use width instead of max-width for question-dd ? — Loi Nguyen Huynh
yes, it does not align properly also it's not a great solution since it needs to support different screen sizes. — Michael

nizantz nizantz · Accepted Answer · 2019-12-18T22:43:07

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>

How to align list items with vuetify (1.5)

1 Answers