Treeview horizontal scroll bar size not correct

[Jinzhg]

Hi,

I am using tree view component and facing a issue: The horizontal scroll bar size of tree view is not correct.

This is my setting for tree view: virtualMode: true itemDisplay: IntegralUIItemDisplayMode.Partial;

And I also take a look at source code: https://github.com/lidorsystems/integralui-web/blob/master/bin/integralui/components/integralui.treeview.js.

I think the content of red box may be: c[e].nativeElement.firstElementChild.firstElementChild.firstElementChild

Follow is my reason:

I not sure whether I have a misunderstanding or loss some settings.

Could you give some suggestions? Thanks.

[Lidor-Systems]

Thank you for your information.

Probably this bug was created when we added animation during hovering over items. Additional element was added in item structure, which caused the problem with horizontal scrollbar to appear.

This is now fixed and the TreeView is updated, current version is now 2.0.221.

[Jinzhg]

Thank you for your quickly fix.

After I changed my local source code by referring to your commits. I found a unfriendly UI issue. When you select multiple nodes, the background color of selections are not aligned.

I think 'display: inline-block' here is not well.

[Lidor-Systems]

This happens because of the 'inline-block', so the item width is determined by its content width and the background is determined by it. This is needed for the horizontal scrollbar to appear.

To have an alignment of item background, is better to change the item style on demand, when item is selected and hovered. Follow these steps:

1. Set the background color of item content to transparent when in hovered or selected state. You can do this via controlStyle property:

Angular

    public treeStyle: any = {
        general: {
            normal: 'treeview-fsld-normal'
        },
        item: {
            content: {
                hovered: 'treeview-fsld-item-transparent',
                selected: 'treeview-fsld-item-transparent'
            }
        }
    }

CSS

            .treeview-fsld-item-transparent {
                background: transparent;
            }

2. Handle the beforeSelect and afterSelect events to change the item background when it is selected:

HTML

<iui-treeview #treeview [appRef]="applicationRef" [items]="items" [controlStyle]="treeStyle" [selectionMode]="selMode" [virtualMode]="true" [itemDisplay]="0" (beforeSelect)="itemBeforeSelect($event)" (afterSelect)="itemAfterSelect($event)">

Angular

    itemBeforeSelect(e: any){
        this.treeview.getList('current')
            .map(obj => obj.data.style = null);
    }

    itemAfterSelect(e: any){
        this.treeview.getList('selected')
            .map(item => item.style = { background: '#80ff80' });
    }

3. Change the item background when it is hovered:

HTML

<iui-treeview #treeview [appRef]="applicationRef" [items]="items" [controlStyle]="treeStyle" [selectionMode]="selMode" [virtualMode]="true" [itemDisplay]="0" (beforeSelect)="itemBeforeSelect($event)" (afterSelect)="itemAfterSelect($event)"  (itemHover)="itemHovered($event)">

Angular

    itemHovered(e: any){
        this.treeview.getList('current')
            .filter(obj => !obj.data.selected)
            .map(obj => obj.data.style = null);

        if (!e.item.selected)
            e.item.style = { background: '#80ffff' }

        this.treeview.refresh();
    }

The item.style field is an object that can hold custom CSS style settings. This style is applied directly to parent <li> element for each item. It overrides any settings from the item CSS class.

Result is: