Insert html content inside tree container for full-screen mode

[danielprosser1]

When you enter full-screen mode, whatever containing element you used to create the chart will be visible and nothing else...

chart = new FamilyTree(document.getElementById("tree"), {
i.e. my "tree" div is visible and nothing else in full-screen mode. I have a navbar on my webpage that I would like to keep visible on full-screen but if I declare it inside the tree div, then it is wiped completely on chart load. I'm resorting to some pretty hacky DOM manipulations to move my navbar inside the tree div on full-screen once the chart is rendered and then move it back out when not in full-screen mode. I have a similar conceptual problem with some custom modal html that I want to be able to pop-up even in full-screen mode.

Is there some recommended approach for injecting our own static html into the tree div via the library itself? I know there's another way to hack this by creating custom elements like this...

editForm: {
                    elements: [
                         type: 'primary_docs', 

And then...

FamilyTree.elements.primary_docs = function (data, edit_element, min_width, read_only) {
   return html_content
}

But the problem with this is that I don't want to repeatedly recreate html content when elements are utilised - I just want 1 static chunk of html to persist inside the tree div. Thanks very much for any thoughts!

[ZornitsaPesheva]

Hi, to be able to show your navbar in the fullscreen it should be included in the family tree element.
The below example is for the OrgChart JS, but it should work for Family Tree JS too:
https://code.balkan.app/org-chart-js/html-inside-chart#JS

[danielprosser1]

Fantastic thanks - works perfectly