CODEWITHSUNDEEP
vue.jsvuetify.js
moi
moi

Reputation: 2030

Vuetify treeview horizontal scroll

I have problems getting horizontal scrolling to work with v-treeview in Vue:

enter image description here

<div id="app">
  <v-app id="inspire">
    <v-navigation-drawer v-model="drawer" app width="150">
      <v-treeview v-model="tree" :open="initiallyOpen" :items="items" activatable item-key="name" open-on-click overflow-x-auto>
        <template v-slot:prepend="{ item, open }">
          <v-icon v-if="!item.file">
            {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
          </v-icon>
          <v-icon v-else>
            {{ files[item.file] }}
          </v-icon>
        </template>
      </v-treeview>
    </v-navigation-drawer>
    <v-main>
      Objects...
    </v-main>
  </v-app>
</div>

CodePen: https://codepen.io/moi90/pen/mdBVMXX

Elements that are too wide are abbreviated. Instead, I want the treeview to be horizontally scrollable. How do i achieve this?

Upvotes: 1

Views: 2467

Answers (2)

Marc Soler
Marc Soler

Reputation: 123

This worked for me:

<v-flex xs12 style="overflow:auto">
   <v-treeview style="width: max-content">
   ...

Upvotes: 4

Vasile Radeanu
Vasile Radeanu

Reputation: 906

You can override some style classes

Add bellow code to CSS in CodePen example

.v-treeview-node__label {
  overflow: initial;
  text-overflow: initial;
}

.v-navigation-drawer__content {
  overflow-x: auto
}

Upvotes: 3

Related Questions