Query Regarding Gridline height in angular diagram

[Rohit Swarup]

We are facing problem with height of grid lines of angular diagram.

We applied class ejs diagram to the syncfusion angular diagram component.

  <ejs-diagram
#diagram

               id="diagram"

               width="100%"

               class="ejs-diagram"

               [getNodeDefaults]='nodeDefaults'

               [layout]='layout'

               [scrollSettings]="scrollSettings"

               [snapSettings]='snapSettings'

               (click)="clicked($event)"

               (collectionChange)="collectionChange($event)"

               (drop)="drop($event)"

               [nodes]="nodes"

               (keydown)="onKeydown($event)"

               canAutoScroll="false"

               (created)="created($event)">

  </ejs-diagram>

In this class we set height ,as we had that requirement

  .ejs-diagram {

                height: calc(100vh - 257px) !important;

                #diagramcontent  {

                    height: calc(100vh - 257px) !important;

                }

            }

This gives the result as below:

The given height appears to apply for the grid lines also ,thus grid lines are visible in above section only

Grid lines are not visible for the below section

Expected Result : The grid lines should be seen in complete diagram evenly

[Aravind Ravi]

Hi Rohit,

On analyzing the provided image, the diagram height is set around 350px, so that diagram does not get rendered for window height. To set the diagram height as window height means then set the diagram parent height as 800px and set diagram height as 100%. So that diagram rendered with full height. Please refer to below code snippet and sample

<style>

    .e-symbolpalette {

        display: block;

    }

    .ejs-diagram {

  height: 800px;

  }

</style>

<div class="control-section">

  <div class="content-wrapper" class="ejs-diagram">

    <ejs-diagram

      #diagram

      id="diagram"

      width="100%"

      height="100%"

      [snapSettings]="snapSettings"

      (created)="created()"

      [getConnectorDefaults]="connDefaults"

      [getNodeDefaults]="nodeDefaults"

      (dragEnter)="dragEnter($event)"

      (created)="diagramCreate($event)"

    >

Sample: https://stackblitz.com/edit/angular-cm2nml?file=app.component.html

Regards

Aravind Ravi