# How to make an iframe unclickable?

**URL:** <https://discourse.nodered.org/t/how-to-make-an-iframe-unclickable/87731>\
**Category:** General\
**Created:** [5 May 2024 20:55 UTC](https://discourse.nodered.org/t/how-to-make-an-iframe-unclickable/87731 "2024-05-05T20:55:24Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![WP-Rue](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/wp-rue/32/87264_2.png) [@WP-Rue](https://discourse.nodered.org/u/WP-Rue)\
**Post date:** [5 May 2024 20:55 UTC](https://discourse.nodered.org/t/how-to-make-an-iframe-unclickable/87731/1 "2024-05-05T20:55:24Z")

</div>

In my dashboard I use a simple 30 min inject-node to trigger an iframe-node with the url of a local weatherforecast-widget.  
Any idea how to inhibit the user to click on this widget?  
Thanks in advanced..  
Rue

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [5 May 2024 22:44 UTC](https://discourse.nodered.org/t/how-to-make-an-iframe-unclickable/87731/2 "2024-05-05T22:44:26Z")

</div>

Hi .. try adding a css style to the iframe with `pointer-events: none;`

> The **`pointer-events`** CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.

([source](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#examples))

---

<div class="post-metadata">

**Author:** ![WP-Rue](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/wp-rue/32/87264_2.png) [@WP-Rue](https://discourse.nodered.org/u/WP-Rue)\
**Post date:** [6 May 2024 06:21 UTC](https://discourse.nodered.org/t/how-to-make-an-iframe-unclickable/87731/3 "2024-05-06T06:21:19Z")

</div>

Yes - pointer-events:none works with code to open an iframe direct in a template node...but the look of the homepage is different to iframe as a node. So I try to use CSS for the iframe-node "Wetter"-  
but it doesn't work... any ideas?

 ![Bildschirmfoto 2024-05-06 um 08.15.30](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/2/4202fb77f0db9538b75c1b0e4191ed998710c7a7.png)

 ![Bildschirmfoto 2024-05-06 um 08.14.38](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/2/62b9e174bcdd3e00ef362c88189ebefb1f2623e3.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [6 May 2024 07:16 UTC](https://discourse.nodered.org/t/how-to-make-an-iframe-unclickable/87731/4 "2024-05-06T07:16:49Z")

</div>

Is that CSS valid? You haven't included a specifier.

E.g

```auto
<style>
iframe {
   pointer-events: none !important;
}
</style>

```

Ps, please don't post code as pictures. Pictures cannot be searched and anyone helping you has to retype what you have already written. Thanks

---

<div class="post-metadata">

**Author:** ![WP-Rue](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/wp-rue/32/87264_2.png) [@WP-Rue](https://discourse.nodered.org/u/WP-Rue)\
**Post date:** [6 May 2024 07:32 UTC](https://discourse.nodered.org/t/how-to-make-an-iframe-unclickable/87731/5 "2024-05-06T07:32:54Z")

</div>

Great! This works. Thank you!!!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [20 May 2024 07:32 UTC](https://discourse.nodered.org/t/how-to-make-an-iframe-unclickable/87731/6 "2024-05-20T07:32:55Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.