Confusing presentation of items, some have children others not

[FritzHerbers]

[x] bug

The presentation of items originating from one parent (same level), where some of these items have children and some do not have children is confusing.

It looks like 'Frontend' and 'Backend' are children from 'Same-level-as-Frontend--but-with-no-children', but they are not, they are all three children from 'Programming'.

The child, without children, misses an indent, like the others having children.

        const itCategory = new TreeviewItem({
            text: 'IT', value: 9, children: [
                {
                    text: 'Programming', value: 91, children: [
                        {
                            text: 'Same-level-as-Frontend--but-with-no-children', value: 910
                        },
                        {
                            text: 'Frontend', value: 911, children: [
                                { text: 'Angular 1', value: 9111 },
                                { text: 'Angular 2', value: 9112 },
                                { text: 'ReactJS', value: 9113, disabled: true }
                            ]
                        }, {
                            text: 'Backend', value: 912, children: [
                                { text: 'C#', value: 9121 },
                                { text: 'Java', value: 9122 },
                                { text: 'Python', value: 9123, checked: false, disabled: true }
                            ]
                        }]

[TheSegfault]

I forked the project integrated the treeview as a simple module into my project ( I did this at first in order to remove bootstrap dependencies ) and then I had this problem and its just a CSS padding issues as long as I remember.

Maybe you can pull request this. The logic is really simple to handle in an afternoon of reading the code.

But maybe you can catch the css rule that does that.

EDIT after some research:

The code is located in treeview.component.html

<i *ngIf="item.children" (click)="onCollapseExpand()" aria-hidden="true" class="fa" [class.fa-caret-right]="item.collapsed"[class.fa-caret-down]="!item.collapsed"></i>

<i *ngIf="!item.children" aria-hidden="true" class="fa"> </i>

Here is the tricks, add an empty fa icon when no children so everything is at the same level

TL;DR: Sadly, fork it and do it yourself

BTW: Leovo is always answering non sense answer to tickets, I experienced it.

[leovo2708]

No, if you see icon collapse/expand, you can understand that the node has children, otherwise it has no children

[FritzHerbers]

@TheSegfault, I fixed it two days ago myself, same like yours. @leovo2708, its not that I don't see that a node has children, but the text of the nodes on the same level don't have the same indent when some have children and some do not have children.

I have adapted the source to support "Microsoft Configure" (checkbox check are not propagated automatically, it needs a setting) checkboxtree, so running my own fork.

[elsegura]

I know is an old question but you can add this code to your css to solve the problem.

.treeview-item .form-inline.row-item > div.form-check:first-child {
    margin-left: 15px;
}

I hope to help someone with same use-case.