#13141 closed defect (fixed)
Tree: selection box is limited only by the visible width of the tree
Reported by: | Sergey Kravchenko | Owned by: | bill |
---|---|---|---|
Priority: | high | Milestone: | 1.8 |
Component: | Dijit - LnF | Version: | 1.6.1 |
Keywords: | Cc: | ||
Blocked By: | Blocking: |
Description (last modified by )
Attachments (5)
Change History (16)
Changed 11 years ago by
Attachment: | showCase.html added |
---|
Changed 11 years ago by
Attachment: | before-scroll.png added |
---|
Changed 11 years ago by
Attachment: | after-scroll.png added |
---|
comment:1 Changed 11 years ago by
Component: | Dijit → Dijit - LnF |
---|---|
Description: | modified (diff) |
Summary: | The selection box is limited only by the visible width of the tree → Tree: selection box is limited only by the visible width of the tree (claro) |
comment:2 Changed 11 years ago by
dijit/templates/TreeNode.html has
div dojoAttachPoint="rowNode" class="dijitTreeRow"
which should probably be
div dojoAttachPoint="rowNode" class="dijitInline dijitTreeRow"
Changed 11 years ago by
Attachment: | dijitInline.gif added |
---|
screenshot from test_Tree.html after applying dijitInline class
comment:3 Changed 11 years ago by
comment:4 Changed 10 years ago by
Owner: | set to bill |
---|---|
Status: | new → assigned |
I think the fix is to set a width, rather than having width=auto. I've seen similar problems with Tooltip where it gets wrapped at where the viewport's right border would be if the viewport was scrolled all the way to the left.
comment:5 Changed 10 years ago by
Resolution: | → patchwelcome |
---|---|
Status: | assigned → closed |
I've thought about this and although I agree it's a problem, I just don't see a good solution.
The basic problem is that the Tree itself limited to (for example) 150px, whereas the TreeNodes can be from 50px to 500px, depending on the length of text of each node. To be precise, each TreeNode may be limited to 150px, but they can have overflowing text making them appear wider.
We can set the selection box to match the width of the Tree, like it is now, via width: 100%. Alternately we can easily make each nodes' selection box match the length of that node (like tundra does) using dijitInline. But it's hard make every nodes' selection box width == the scrollWidth of the Tree, since the scrollWidth changes based on the longest visible tree row, and that potentially changes on every expand/collapse of a parent TreeNode. So it seems to require measuring the width of every node every time a new node is shown or hidden (via expand/collapse).
I'm going to mark this as patchwelcome. If someone has a good patch or approach I'd be very interested to see it.
Changed 10 years ago by
Attachment: | TreeNode_dijitInline.patch added |
---|
Patch against [28627] to attempt to fix problem on horizontally scrollable trees where blue background for hovered and selected TreeNodes doesn't extend all the way to the right, in the case where some TreeNode are wider than the Tree itself (producing a horizontal scrollbar on the tree). It only works though for the widest nodes in the Tree. For the shorter nodes, the blue background extends to the end of the text, but not all the way to the right. Also, I had to remove the left and right borders to make the min-width: 100% work correctly, since box-sizing: border-box doesn't work on inline-block elements, at least on firefox. But it seems like those borders would be unwanted in general anyway, specifically when the Tree is inside a box such as the left-hand pane of a mail web-app. IE6 and IE7 don't support min-width, so the patch has no effect there, but it does work on IE8+.
comment:6 Changed 10 years ago by
Milestone: | tbd → 1.8 |
---|---|
Resolution: | patchwelcome |
Status: | closed → reopened |
Summary: | Tree: selection box is limited only by the visible width of the tree (claro) → Tree: selection box is limited only by the visible width of the tree |
(Changing summary since the same problem exists in the other themes for the hover effect.)
I've been rethinking this problem and I'm ready to (reluctantly) check in a javascript solution. A pure CSS solution would be better, but a javascript solution seems better than nothing. Hopefully I won't regret the decision.
showcase