Text Wrap on Full-Width Treeview

101 views
Skip to first unread message

mathieu....@ohs.org

unread,
Jan 31, 2023, 6:38:13 PM1/31/23
to AtoM Users
Hello,

We're users of the full-width tree view, and we have a number of collections with either items with long titles, or nested collection structures that limit the real estate of one line of the tree-view.  For desktop users that's not a huge issue because hovering over the line will display all the information.  Browsing for Mobile users is better in 2.7 because scrolling the tree view works better than previous versions, but unfortunately the truncation of the title and the inability to hover limits the effectiveness of that improvement.

I've been playing around a little bit and I found that editing fullWidthTreeView.css thusly (additions in bold):
```
fullwidth-treeview-row a.jstree-anchor {
  width: 96.5%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  height: auto;

}
```
Will wrap the text, and it seems to work without issue, see attached for examples.  I think it'd be nice if the second line was indented, just for some visual separation, but certainly good enough, and readable no matter what screen size or device.

This also works with the new B5 themes by adding the same two lines to atom/plugins/arDominionB5Plugin/scss/_fullwidthtreeview.scss under .jstree-anchor

I may be paranoid, but this seems too simple, so my question is, has anyone else tried this solution? Are there any pitfalls I'm missing? Has anyone gotten any feedback about navigating using the tree-view?  I'd love to hear about your experiences.

Best,
Mathieu

NotWrappedTreeview.png
WrappedTreeview.png

José Raddaoui

unread,
Feb 6, 2023, 2:03:27 PM2/6/23
to AtoM Users
Hi Mathieu,

From a developer perspective those changes look good to me, you could even remove the two rules above if you want (overflow and text-overflow). I'm glad you could find a solution to the issue and I agree it would be a great thing to add, maybe based on device type to avoid changing the desktop behavior.

Best regards,
Radda.

mathieu....@ohs.org

unread,
Feb 7, 2023, 2:52:43 PM2/7/23
to AtoM Users
Thanks Radda this is good to know, and I'll probably implement this soon. Usually the feedback I get regarding the treeview is people either love it or hate it, and the first question I ask is "what device are you using?" because I know the navigation is a little tricky on a small screen - for those folks I tend to suggest the more visual browse options.
Reply all
Reply to author
Forward
0 new messages