Single parent name overlapping issue

[Prerana-das]

Hi, I'm using the Family tree js professional plan. So see here using the "john" template. But the link(edge) overlapping username. This happens when a child has only one parent. How can I avoid this?

[ZornitsaPesheva]

I have created an example for you here: https://code.balkan.app/family-tree-js/one-parent-child-link#JS

[Prerana-das]

"32" overlapping the path line. Is it possible to start the path under the name? Just for a single parent-child relationship.

[ZornitsaPesheva]

https://code.balkan.app/family-tree-js/one-parent-child-link#JS

[Prerana-das]

https://code.balkan.app/family-tree-js/one-parent-child-link#JS

I have created an example for you here: https://code.balkan.app/family-tree-js/one-parent-child-link#JS

Thanks a lot

[Prerana-das]

One more thing

I don't want to minimize nodes. Want to see the whole tree along? How to avoid this minimization of nodes? Thanks

[ZornitsaPesheva]

You can't see the whole tree. The parents on one of the partners are always collapsed.

[Prerana-das]

You can't see the whole tree. The parents on one of the partners are always collapsed.

All right. Okay thanks

[Prerana-das]

I want to change this collapse icon. How can I change this? Could you help me, please?

[ZornitsaPesheva]

You can get the definition from here: https://balkan.app/FamilyTreeJS/Docs/PredefinedTemplates#baseFTTemplate Click on Get the source code of base template It is the "base_up" from the FamilyTree.templates.base definition You can change the definition here or you can change the icon itself. Here is the definition of the icon:

    return `<svg width="${w}" height="${h}" x="${x}" y="${y}" viewBox="0 0 512 512"  >
                <path fill="${c}" d="m336.061 377.731c-5.086-6.54-14.511-7.717-21.049-2.631l-44.012 34.231v-200.331c0-8.284-6.716-15-15-15s-15 6.716-15 15v200.331l-44.011-34.231c-6.538-5.086-15.962-3.908-21.049 2.631-5.086 6.539-3.908 15.963 2.631 21.049l62.429 48.556v49.664c0 8.284 6.716 15 15 15s15-6.716 15-15v-49.664l62.429-48.556c6.54-5.086 7.717-14.51 2.632-21.049z" />
                <path fill="${c}" d="m271 497v-49.664l62.429-48.556c6.54-5.086 7.717-14.51 2.631-21.049-5.086-6.54-14.511-7.717-21.049-2.631l-44.011 34.231v-200.331c0-8.284-6.716-15-15-15v318c8.284 0 15-6.716 15-15z" />
                <path fill="${c}" d="m320 512h-128c-8.284 0-15-6.716-15-15s6.716-15 15-15h128c8.284 0 15 6.716 15 15s-6.716 15-15 15z" />
                <path fill="${c}" d="m320 482h-64v30h64c8.284 0 15-6.716 15-15s-6.716-15-15-15z" />
                <path fill="${c}" d="m400 439c-61.206 0-111-49.794-111-111s49.794-111 111-111 111 49.794 111 111-49.794 111-111 111z" />
                <path fill="${c}" d="m112 439c-61.206 0-111-49.794-111-111s49.794-111 111-111 111 49.794 111 111-49.794 111-111 111z" />
                <path fill="${c}" d="m256 222c-61.206 0-111-49.794-111-111s49.794-111 111-111 111 49.794 111 111-49.794 111-111 111z" />
                <path fill="${c}" d="m367 111c0-61.206-49.794-111-111-111v222c61.206 0 111-49.794 111-111z" />
            </svg>`;
};