How to Prevent Magnifier in Mobile Devices in React Diagram?

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

       #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.

Conclusion

We hope you enjoyed learning about how to prevent the magnifier on mobile devices in React Diagram.

You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React 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 check out 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!