We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Diagram loads on half the page

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?



3 Replies

BM Balasubramanian Manikandan Syncfusion Team November 8, 2022 05:08 AM

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





MH Matthew Hubbell replied to Balasubramanian Manikandan November 8, 2022 08:08 PM

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



BM Balasubramanian Manikandan Syncfusion Team November 9, 2022 05:35 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon