CODEWITHSUNDEEP
htmlcssvue.jsvuejs2vuetify.js
Michael
Michael

Reputation: 5048

How to align list items with vuetify (1.5)

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:

enter image description here

Things I tried:

  1. Putting everything in a . layout and creating v-flex which take a set amount of the grid.

  2. Injecting classes in places where I don't have access (sadly v-list is not exposed as you can see

  3. 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?

Upvotes: 0

Views: 2064

Answers (1)

nizantz
nizantz

Reputation: 1621

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>

Upvotes: 1

Related Questions