How to set Auto width and Auto height of the canvas according to the wrapper of the canvas, and How to set height according to the content of the palette.
Setting DIV width/height as a% works, and many of our sampels do it. For example try resizing the width of the window smaller: Family Tree (British)
This is because it has:
<div id="myDiagramDiv" style="background-color: white; border: solid 1px black; width: 100%; height: 550px"></div>
You could set the palette height to the height of the Palette.documentBounds, plus some amount for margin. Do you want to do this once or every time the document bounds changes?
Hi @simon I’ve tried the solution you gave me. I am using ngx-accordion component of angular bootstrap. In that accordion I have four different panels with one gojs palette in each panel. Each palette can have any number of nodes but it won’t be more than 9 nodes. I want to open the palette with auto height so that each palette opens and shows all the nodes it has with auto height adjustment.
You could define an “InitialLayoutCompleted” DiagramEvent on the visible Palette that set the DIV’s height to the Palette’s Diagram.documentBounds .height and then called Diagram.requestUpdate on the Palette.
When the user selects a different accordion panel/tab, you could consider changing the DIV height again, if you want.
Hi,!@walter I tried the solution it is setting the height of my canvas as desired. But There is one more problem initially when the canvas gets loaded it looks like this.
If you can see a small square with background-color gray that expands and shows all the nodes that I have, on mouse over and scrolling on that small gray part.
After scroll or mouse over the expanded section looks like this
I want to achieve the second state on page load itself.
please ignore the blue background color.
I have no idea of how to initialize those accordion components, nor do I have any idea of what your code is doing.
Are you calling Diagram.requestUpdate after setting the DIV height?
yes, I am doing that.
Here’s the code to set the height.
paletteTriggers.addDiagramListener('InitialLayoutCompleted', setLayoutForTriggers); function setLayoutForTriggers() { paletteTriggers.div.style.height = paletteTriggers.documentBounds.height + 'px'; paletteTriggers.requestUpdate(); }
But I think it’s not because of height.
You still haven’t said anything about how you are initializing the accordion and the DIV and diagram within it.
Yes, that’s the code I told you that you needed. But why aren’t you setting the width of the DIV?
I cannot help you with initialization problems with the accordion. Does it work if you put the DIV and its Diagram elsewhere, outside of the accordion?
Actually, I am using angular bootstrap accordion. So I am not writing anything for initializing it programmatically except HTML.
Width is already set using CSS that’s why I am setting it through Js.
Yes, it does work with div outside the accordion.