Vuetify: [Feature Request] v-treeview - style entire node row

[ThomasKuhlmann]

Problem to solve

It currently doesn't seem easily possible to style the full row of a node since you use a margin to move the nodes to their position, so any changes to e.g. background colour will always just apply to the text and icon, never to the entire row

Proposed solution

Wrap each node in a full-width div to enable styling of the entire row, similar to what Google Drive does:

(if we could at the same time implement the overflow of a node label instead of just cutting it off like it is now when it overflows the parent div, even better. Maybe that's already possible and I just haven't figured out how to do it. If that's the case, an example would be greatly appreciated)

[ZviBaratz]

Hi @ThomasKuhlmann,
Just wanted to let you also encountered some problems with text wrapping (though mine overflowed from the surrounding v-card, not sure what's the difference between our implementations) and managed to make it wrap by adding the custom CSS:

.v-treeview-node__content, .v-treeview-node__label {
  flex-shrink: 1;
  word-break: break-all;
}
.v-treeview-node__root {
  height: auto;
}

I based it on this SO answer and it seems to work. Could definitely be cool to just have a wrap-text configuration or something of the sort.

[nekosaur]

Node text ellipsis has been addressed in https://github.com/vuetifyjs/vuetify/pull/7518. Please try to keep feature request to a single feature or suggestion.

[anzuj]

Hi @ThomasKuhlmann,
Just wanted to let you also encountered some problems with text wrapping (though mine overflowed from the surrounding v-card, not sure what's the difference between our implementations) and managed to make it wrap by adding the custom CSS:

.v-treeview-node__content, .v-treeview-node__label {
  flex-shrink: 1;
  word-break: break-all;
}
.v-treeview-node__root {
  height: auto;
}

I based it on this SO answer and it seems to work. Could definitely be cool to just have a wrap-text configuration or something of the sort.

@ZviBaratz blast from the past, but I want to thank you for posting this! I'm dealing with some legacy code and this saved the day :)