Vuetify - How to align rows in a v-treeview?

user_13923198 0
Viewed 429

New to Vue js, so please excuse me if its an ignorant question. I've searched all over and can't seem to figure this out.

I have a v-treeview with a folder structure, and descriptions of each folder in a 2nd column. I'm unable to get the Description column to align in the same row as the Browse column.

How can I get my 2nd column to align with the treeview?

My code is below:

<v-layout>
  <v-flex xs12 sm4 justify-center>
    <h4>Browse</h4>
    <v-treeview
      v-model="selectedSelectableNodes"
      :items="rootStructure"
      item-key="path"
      item-text=""
      :search="search"
      :filter="customFilter"
      :open="open"
    >
    </v-treeview>
  </v-flex>

  <v-flex xs12 sm3 justify-center>
    <h4>Description</h4>
    <ul v-for="(item, i) in description" :key="i">
      <li><v-chip :color="colorCycle[(i+1) % 4]" outlined>{{ item }}</v-chip></li>
      <br/>
    </ul>
  </v-flex>

Current Display

vuetify.js vue.js css javascript
1 Answers

One workaround is to apply .v-treeview-node__root class to the <ul>, and .v-treeview-node to the <li> so they inherit the same styles as the TreeView nodes:

<ul class="v-treeview-node__root" v-for="(item, i) in description" :key="i">
  <li class="v-treeview-node">
    <v-chip :color="colorCycle[(i + 1) % 4]" outlined>{{item}}</v-chip>
  </li>
  <br />
</ul>

enter image description here

demo

user_62771510
Related