When a Lucid Chart image is embedded in a web page, the Lucid viewer allows the accidental scrolling and zooming of the image. Currently, there is no option to disable these features.
There is a simple way to prevent accidental interaction with the Lucid Chart viewer. We can place a transparent layer on top of the image to isolate it.
- Create a 1 x 1 pixel transparent png file: transparent-1_1.png
- Enclose the embedded chart in a parent DIV and place the transparent layer on top of it
- Set the width and height in the parent DIV, and use ” width: 100%, height: 100% ” in the transparent IMG and the IFRAME code to match all sizes
This syntax is for Remix React.js, which uses {{ }} around the style elements, but it should be easy to reformat it for regular CSS
<div style={{width: '960px', height: '720px', margin: 'auto', position: 'relative'}}>
<img src="transparent-1_1.png" style={{width: '100%', height: '100%', position: 'absolute'}}/>
<iframe allowFullScreen frameBorder="0" style={{width: '100%', height: '100%'}} src="https://lucid.app/documents/embedded/MY_GUID" id="MY_ID">
</iframe>
</div>