Diagram loads on half the page

[Matthew Hubbell]

I am trying to use the demo examples to learn how to use the control and I don't seem to be able to center the diagram on initial load.  If I resize the browser window, the diagram left justifies displaying all of the nodes.  The demos work fine on your site but not on my local host.  I have tested on Angular 12 and 14.  Do you have any suggestions to what I may be doing wrong?

[Balasubramanian Manikandan]

Use the FitToPage method to fit the diagram within the viewport. The FitToPage method is called in the created event. Refer to the code example and the sample below.

Code Snippet:

  public created() {

    this.diagram.fitToPage();

  }

Documentation Link :

https://ej2.syncfusion.com/documentation/diagram/commands/#fittopage-command

Sample :

https://stackblitz.com/edit/angular-fbmdvb?file=app.component.html,app.component.ts

[Matthew Hubbell]

Hi Balasubramanian, 

I tried the solution (above), but it didn't work until I added the line (below) to the index.html.

<link rel='nofollow' href="//cdn.syncfusion.com/ej2/20.3.47/material.css" rel="stylesheet" />

Is it a combination of the two solve the issue?

Thanks,

Matt

[Balasubramanian Manikandan]

Yes, you need to refer the Material.CSS file in diagram.