How to Prevent Magnifier in Mobile Devices in Angular Diagram?

This article explains how to prevent the magnifier from appearing on mobile devices while dragging a node with a label in the Syncfusion® Angular Diagram component. To achieve this, we use a workaround that disables the magnifier by applying specific CSS properties:

CSS

   #diagram {
     user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
   } 

1. user-select: none: This property prevents users from selecting text within the targeted element. When applied, it disables the ability to highlight text using a cursor or touch input.
2. -webkit-user-select: none: This is the WebKit-specific prefix for the user-select property, targeting browsers like Chrome, Safari, and older versions of Edge.
3. -ms-user-select: none: This is the Microsoft-specific prefix for the user-select property, targeting browsers like Internet Explorer or older versions of Edge.

These properties ensure that unintended text selection is prevented while interacting with the diagram, resulting in a smoother and more focused user experience.

Please refer to the working sample for reference.

Sample

Conclusion

I hope you enjoyed learning about how to prevent the magnifier in mobile devices in Angular Diagram.

You can refer to our Angular Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, as well as how to quickly get started with configuration specifications. You can also explore our Angular Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to explore our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!