[IxTree] Content of item overflows ix-tree-item

[ttwiesal]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

Summary

The content within treeitem elements in the IxTree component is overflowing, causing layout and display issues.

Description

When using the Tree component, if the content inside a TreeItem is longer than the available space, it overflows instead of wrapping or truncating appropriately. This results in text or other content spilling out of the TreeItem boundaries, leading to a messy and unusable UI.

Expected Behavior

Content within a TreeItem should either wrap to the next line or be truncated with an ellipsis, depending on the design specifications. The TreeItem should maintain its layout integrity without any overflow.

Actual

What type of frontend framework are you seeing the problem on?

Angular

Which version of iX do you use?

v2.2.1

Code to produce this issue.

import { Component } from '@angular/core';
import { TreeModel } from '@siemens/ix';

@Component({
  selector: 'app-root',
  styles: [
    `
      .example {
        margin: auto;
        display: block;
        position: relative;
        height: 32rem;
        width: 10rem;
      }
      .item-name {
        text-wrap: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    `,
  ],
  template: `<div class="example">
    <ix-tree root="root" [model]="model" [renderItem]="treeItem"></ix-tree>
    <ng-template #treeItem let-item>
      <div class="item-name">
        {{ item.name }}
      </div>
    </ng-template>
  </div>`,
})
export class AppComponent {
  model: TreeModel<{
    name: string;
  }> = {
    root: {
      id: 'root',
      data: {
        name: '',
      },
      hasChildren: true,
      children: ['sample'],
    },
    sample: {
      id: 'sample',
      data: {
        name: 'Sample',
      },
      hasChildren: true,
      children: ['sample-child-1', 'sample-child-2'],
    },
    'sample-child-1': {
      id: 'sample-child-1',
      data: {
        name: 'Sample Child 1 with long text to show problem',
      },
      hasChildren: false,
      children: [],
    },
    'sample-child-2': {
      id: 'sample-child-2',
      data: {
        name: 'Sample Child 2',
      },
      hasChildren: false,
      children: [],
    },
  };
}

[TheMat556]

Hello @ttwiesal! I think this should already work, if you just overwrite the custom tree node, i have provided a small example: https://stackblitz.com/edit/q8apgn?file=src%2Fapp%2Ftree-custom.ts

[ttwiesal]

Hello @TheMat556, thank you for your suggestion and it works using a grid layout.

[matthiashader]

I will close this issue, if there are any more problems don't hesitate to open a new issue!