Disable scroll and remove scrollbars

Hello,
Is there a way to not show the vertical and horizontal scrollbars and to also disable the scrolling throughout the diagram, i want navigating only through zoom and pan, but no scrollbars.

Also how to achieve this shown on the picture regarding the line showing for the alignment of the nodes or connectors.



1 Reply

SJ Sivaranjith Jeyabalan Syncfusion Team May 18, 2023 02:42 PM UTC


Hi,

Query

Response

Is there a way to not show the vertical and horizontal scrollbars and to also disable the scrolling throughout the diagram, i want navigating only through zoom and pan, but no scrollbars.

We have created a sample in which we hided the diagram scrollbar. Please find the sample and code example below.

 

Code example:

 

<style>

  #diagramcontent {

    overflow: hidden !important;

  }

</style>

 

Sample: Ehs5e7 (forked) - StackBlitz

 

Also how to achieve this shown on the picture regarding the line showing for the alignment of the nodes or connectors.

By default, the snapping lines will be visible when we drag or resize shapes. Please find the code example below to enable snapping lines.

 

Code example:

 

app.component.html

<ejs-diagram

          #diagram

          id="diagram"

          width="100%"

          height="700px"

          [snapSettings]="snapSettings"

></ejs-diagram>

app.component.ts

 

public snapSettings: SnapSettingsModel = {

    constraints:SnapConstraints.All | SnapConstraints.SnapToObject

  };

 

 

 

 


Regards,

Sivaranjith


Loader.
Up arrow icon