Allow elements behind iframe to be clickable

Question

I'm trying to embed a third party chatbot (via iframe) into my web application (ASP.NET MVC). As with any other chatbot, in this case as well, a button is displayed to initiate a chat (RHS below of the screen) and on click of the button, the the chatbot expands to take up the the entire RHS of the webapp (overlapping the buttons, which were present on the parent window). Following is the snippet of code:

<div id="chatBot">    
    <iframe frameborder="0" id="chatwindow" src="@System.Web.Configuration.WebConfigurationManager.AppSettings["ChatBotUrl"]"></iframe>
</div>

CSS:

#chatwindow {
    height: 100vh;
    width: 100%;
    right: 15px;    
}

#chatBot {
    position: fixed;
    right: 0;
    bottom: 0;
    height: 100vh;
    width: 390px;
    z-index: 11111;    
}

Now the issue which I'm facing is that, as the chatbot div is taking up entire RHS real estate, any buttons or links behind the div is not clickable. I did try the following options:

1. Setting pointer-event: none
2. Subscribing to click event with in the iframe and manipulating attributes (this is kind of hacky way, but this does not work in my case due to cross domain restriction).
3. Using windows blur, to deduce a click (but this doesn't as the way to close the chatbot is via a button, embedded within the iframe).

Please do let me know, how to go about resolving the same.

Answer 1

Your chatbot div is taking up entire RHS because you tell it to do so in css by setting height: 100vh;. And combining that with position: fixed; and the width: 390px; means that the RHS for 390 pixels from your window is used by your <div id="chatBot".... Also using z-index: 11111; you are sure to have it overlay over everything on that page.

So this has nothing to do with your iframe. Is just pure css. But I imagine the problem is that you want your chat window to get to full width when is opened. Than you should build a javascript solution (or if you use some framework that allows you to conditionally render a class use that) to dynamically set the width to 100% or 100vh only when the chat is opened, and remove that when the chat is closed.

I also recomand you to use z-index only when you really need it, and try to not use such big numbers because is hard to maintain code like this.

Edit: You can do that by creating a greater z-index context. But then your buttons will display over your chat iframe.

You can try creating the same z-index context for your chatBot div and also for the container of the buttons, that give the iframe display relative and z-index: 1

But it would be easier to work with contexts if you don't use such big numbers for z-index. (this is why I said you should use smaller z-index). Anyway this can work too. It doesn't matter that much. Is just not a very good practice.

Continuing: please note that if you have an element positioned relative, absolute or fixed with a z-index that is already a context. So if you have another element with positioned but with z-index slightly greater (let's say first has z-index:1 and second has z-index:2) that second context will be grater than the first, no matter what. So if you have inside the first element (with no z-index) another element, you can give what ever z-index you want (z-index: 99999 for example)it will only have that huge index in the first context. So will display under the second element if the overlap. Example:

.big-z-index {
  position: absolute;
  z-index: 9999;
  background:red;
  width: 100px;
  height:50px
}
.small-z-index {
  position: absolute;
  z-index: 2;
  background:blue;
  width: 50px;
  height:20px
}

<div style="position: absolute; z-index:1">
  <div class="big-z-index"></div>
</div>
<div class="small-z-index"></div>

So if you have z-index context on containers, only if you have the same context you can position certain elements.