Observe inconsistency with the node's selection rectangle size in the tree view with ellipsis for nodes text

[vundev]

This is a bug report for the @clr Angular or UI versions of the design system.

Prerequisites:

• We have a clr tree inside a div container with max-width set.
• Each node is represented by a html button which uses ellipsis for its text just to decrease the total width of the tree when we have deeply nested configurations.

Stackblitz.

Steps to reproduce the behaviour:

1. Create the tree with the described requirements
2. When you click or hover on each tree node then the selection rectangle does not reach the tree's right border. Also some strange horizontal scroll bars appear for part of the nodes.

I expect no scroll bars to appear per node, just only one for the whole tree because it exceeds the max size of its div container and also the selection rectangle to reach the tree's right border.

Clarity version:

• [x] v12.x
• [x] v13.x
• [x] Other: 5

Framework:

• [x] Angular
• [ ] React
• [ ] Vue
• [ ] Other:

Framework version: Angular 11

Device:

• Type: MacBook pro
• OS: macOS
• Browser chrome
• Version 96

[vundev]

[bbogdanov]

Hi @vundev,

Stackblitz example

Lines 9-12

We will discuss it in the team if this should be the default behaviour but until then use the CSS workaround.

[kevinbuhmann]

I expect no scroll bars to appear per node, just only one for the whole tree because it exceeds the max size of its div container and also the selection rectangle to reach the tree's right border

Both issues appear to be fixed in v16: https://stackblitz.com/edit/clarity-dark-theme-clr16-15wq4w

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.