Left cards disappear

[DrAljuhani]

When adding multiple cards in same level the far left cards disapears

`let tree = {
1: {
2: '',
3: {
6: '',
7: ''
},
4: '',
8: '',
9: '',
10: '',
11: '',
12: {
28: '',
29: {
30: '',
31: '',
32: {
35: '',
36: ''
},
33: '',
34: ''
}
},
13: '',
14: '',
15: '',
16: '',
17: '',
18: '',
19: '',
20: '',
21: '',
22: '',
23: '',
24: '',
25: '',
26: '',
27: ''
}
};

let treeParams = {
    1: {trad: 'Card 1'},
    2: {trad: 'Card 2'},
    3: {trad: 'Card 3'},
    4: {trad: 'Card 4'},
    5: {trad: 'Card 5'},
    6: {trad: 'Card 6'},
    7: {trad: 'Card 7'},
    8: {trad: 'Card 8'},
    9: {trad: 'Card 9'},
    10: {trad: 'Card 10'},
    11: {trad: 'Card 11'},
    12: {trad: 'Card 12'},
    13: {trad: 'Card 13'},
    14: {trad: 'Card 14'},
    15: {trad: 'Card 15'},
    16: {trad: 'Card 16'},
    17: {trad: 'Card 17'},
    18: {trad: 'Card 18'},
    19: {trad: 'Card 19'},
    20: {trad: 'Card 20'},
    21: {trad: 'Card 21'},
    22: {trad: 'Card 22'},
    23: {trad: 'Card 23'},
    24: {trad: 'Card 24'},
    25: {trad: 'Card 25'},
    26: {trad: 'Card 26'},
    27: {trad: 'Card 27'},
    28: {trad: 'Card 28'},
    29: {trad: 'Card 29'},
    30: {trad: 'Card 30'},
    31: {trad: 'Card 31'},
    32: {trad: 'Card 32'},
    33: {trad: 'Card 33'},
    34: {trad: 'Card 34'},
    35: {trad: 'Card 35'},
    36: {trad: 'Card 36'},
};

treeMaker(tree, {
    id: 'my_tree', card_click: function (element) {
        console.log(element);
    },
    treeParams: treeParams,
    'link_width': '4px',
    'link_color': '#2199e8',
});`

[adheesh24]

@roumilb @CasualJon

[roumilb]

Looks like your tree is larger than the page, what behaviour would you like to have when this happens?
I'm thinking about an auto scroll

[sajidmanzoor10p]

@roumilb Added auto scroll and it is not fixed. 😢

[Enkkfull]

Hello, I'm having the same issue. Is there any solution you could suggest?

[sajidmanzoor10p]

@Enkkfull I had same issue. I was not able to fix it, So I have used an alternative NPM package. You can also try this. Here is the one, I have used:
https://www.npmjs.com/package/d3-org-chart

[vhunko]

workaround would be to calculate number of cards with no children (with empty string as values), multiply this number by card width + offset.
by default card width is set to 150px and offset is 20px, so each card takes 20 + 150 + 20 = 190px.
if you have e.g. 17 cards without children, then layout width should be 17 * 190 = 3230px.
just set this width to element with id = my_tree

[roumilb]

I've finally found some time to fix this issue, check the PR :)

You can check the new file in the examples folder complex-tree.html