# Render Fuse Element on top of WebView?

**URL:** <https://forums.fusetools.com/t/render-fuse-element-on-top-of-webview/6301>\
**Category:** How-to Discussions\
**Created:** [March 2, 2016, 9:55pm UTC](https://forums.fusetools.com/t/render-fuse-element-on-top-of-webview/6301 "2016-03-02T21:55:33Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ari\_Velazquez](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/ari_velazquez/32/184_2.png) [@Ari\_Velazquez](https://forums.fusetools.com/u/Ari_Velazquez)\
**Post date:** [March 2, 2016, 9:55pm UTC](https://forums.fusetools.com/t/render-fuse-element-on-top-of-webview/6301/1 "2016-03-02T21:55:33Z")

</div>

I’m trying to use a `Rectangle` set to Overlay to functionally “fade away” some `WebView` content while a sidebar is active. However, it seems that the `WebView` is being rendered on top of everything.

The following is drastically simplified:

```auto
<Panel>
    <Rectangle Layer="Overlay" Fill="#000" Width="100%" Height="100%" Opacity="0.5" />
    <Panel>
        <NativeViewHost>
            <WebView />
        </NativeViewHost>
    </Panel>
</Panel>

```

In this case, the Rectangle is not visible and it seems like it should be.

Is there something I can do to get the `WebView` to allow the `Rectangle` to be drawn over it? Or do I need to inject some HTML into the `WebView` to mimic the effect?

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [March 2, 2016, 10:06pm UTC](https://forums.fusetools.com/t/render-fuse-element-on-top-of-webview/6301/2 "2016-03-02T22:06:52Z")

</div>

I’m fairly certain drawing elements _on top_ of native elements isn’t something that’s supported right now, but I could be wrong. The main reasoning behind this is when native elements render, we don’t necessarily have control of the surfaces etc they’re rendering to, and many native components rely on having direct access to the GPU to render their content.

---

<div class="post-metadata">

**Author:** ![LuisRodriguezLD](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/luisrodriguezld/32/616_2.png) [@LuisRodriguezLD](https://forums.fusetools.com/u/LuisRodriguezLD)\
**Post date:** [March 3, 2016, 3:28pm UTC](https://forums.fusetools.com/t/render-fuse-element-on-top-of-webview/6301/3 "2016-03-03T15:28:55Z")

</div>

I am having the same issue, is there a workaround?

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [March 3, 2016, 3:41pm UTC](https://forums.fusetools.com/t/render-fuse-element-on-top-of-webview/6301/4 "2016-03-03T15:41:20Z")

</div>

Hi!

The `NativeViewHost` represents a new layer that cannot be mixed with GL graphics.

However, you can put other stuff inside the `NativeViewHost`:

```auto
<NativeViewHost>
    <Panel>
        <Text>Hi! I'm on top of the WebView</Text>
        <WebView />
    </Panel>
</NativeViewHost>

```

You can also use a `GraphicsView` inside the `NativeViewHost` to create another GL layer, however note that this can lead to performance trouble.

---

<div class="post-metadata">

**Author:** ![LuisRodriguezLD](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/luisrodriguezld/32/616_2.png) [@LuisRodriguezLD](https://forums.fusetools.com/u/LuisRodriguezLD)\
**Post date:** [March 3, 2016, 3:47pm UTC](https://forums.fusetools.com/t/render-fuse-element-on-top-of-webview/6301/5 "2016-03-03T15:47:12Z")

</div>

Worked like a charm. Thank you very much!

---

<div class="post-metadata">

**Author:** ![Freak](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/freak/32/541_2.png) [@Freak](https://forums.fusetools.com/u/Freak)\
**Post date:** [October 9, 2017, 7:43am UTC](https://forums.fusetools.com/t/render-fuse-element-on-top-of-webview/6301/6 "2017-10-09T07:43:59Z")

</div>

Hi Anders, I am implementing a chat application using fuse. For that, I am using two users as customer and agent. The agent is wishing to send HTML elements like buttons to the customer with texts. can I use the WebView for include all the chat content or is there any way to do so?

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [October 9, 2017, 10:02am UTC](https://forums.fusetools.com/t/render-fuse-element-on-top-of-webview/6301/7 "2017-10-09T10:02:43Z")

</div>

@Freak: don’t hijack old threads, make your own new posts.

Also, your question is far too generic to provide a sensible answer, please be more specific (in a new forum post).