After div is expanded, no other buttons work in that vertical space

Question

I have a tab button that handles the chatbox functionality. By default it is closed and when clicked, expands into the chat box. When it is closed all the buttons around it work as intended, however, when expanded the buttons above it can no longer be clicked like there is a invisible div over them.

Here I will provide the pictures of what I am describing and the corresponding code.

Closed(plus sign button working correctly)

Opened(plus sign button no longer working)

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
   
    <style type="text/css">
      body {
        font-family: 'Roboto Condensed', sans-serif;
      }

      #side-chat {
        position: absolute;
        right: 100%;
        bottom:50%;
        
        width: 150px;
        margin-right: -59px;
        transform: rotate(-90deg);
        display:flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        border-radius: 10px;
        background: rgba(30, 175, 230, 0.5);
        text-decoration: none;
        padding: 15px;
        font-size: 25px;
        line-height: 20px;
        text-align: center;    
      }
      #olark-box-wrapper {
        position: absolute;
        z-index:99999999999999 !important;
        top:0;
        

        height: 100%; 
  
        display: flex; 
        justify-content: right;
        align-items: center;
     
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-duration: 0.3s;
      }
      #olark-box-wrapper.chatbox-open {
        right: 0
      }
      #olark-box-wrapper.chatbox-closed {
       right: -300px;
      }
      #habla_window_div {
        margin: 0 !important;
      }
      #side-chat img{
        margin-right: 10px;
        
      }
      #side-chat:hover,
      #side-chat:active {
       background: #22a7e5;
}
    </style>
  </head>
  <body>
    
<div id="wrapper-of-wrapper">
  <div id="olark-box-wrapper">

  <!-- Olark chat tab -->
    <a id="side-chat" href="javascript:void(0);" onclick="setTimeout(changeClass, 2);">
      <img src="icon-chat.svg">
         Chat
    </a>

  <!-- Empty Olark chat box container -->
  <div id="olark-box-container"></div>

</div>
</div>
  
<!-- begin olark code -->
<script type="text/javascript" async> ;(function(o,l,a,r,k,y){if(o.olark)return; r="script";y=l.createElement(r);r=l.getElementsByTagName(r)[0]; y.async=1;y.src="//"+a;r.parentNode.insertBefore(y,r); y=o.olark=function(){k.s.push(arguments);k.t.push(+new Date)}; y.extend=function(i,j){y("extend",i,j)}; y.identify=function(i){y("identify",k.i=i)}; y.configure=function(i,j){y("configure",i,j);k.c[i]=j}; k=y._={s:[],t:[+new Date],c:{},l:a}; })(window,document,"static.olark.com/jsclient/loader.js");
  /* custom configuration goes here (www.olark.com/documentation) */
  //olark.configure('system.hb_detached', true);
  olark.configure('box.inline', true);
  olark.identify('xxxx-xxx-xx-xxxx');</script>
  <!-- end olark code -->
  <script type='text/javascript'>
    // Javacript function to toggle the class of the chat box wrapper
    function changeClass()
    {
      // Get the HTML object containing the Olark chat box
      var olark_wrapper = document.getElementById("olark-box-wrapper");
      // If the chat box is already open, close id
      if ( olark_wrapper.className.match(/(?:^|\s)chatbox-open(?!\S)/) ) {
        olark_wrapper.className = "chatbox-closed";
        document.querySelector('#side-chat img').src = "icon-chat.svg";
      }
      // Otherwise add open the Olark chat box
      else {        
        olark_wrapper.className = "chatbox-open";
        document.querySelector('#side-chat img').src = "icon-cancel.svg";
        
      }
        
    }
</script>
  </body>
</html>

Any suggestions on why this could be taking the functionality of the buttons in the same vertical space away? Thanks in advance.

Without even looking at the code I can pretty much guarantee that you are overlapping those buttons with a transparent element, and catching the clicks. Try right clicking one of those buttons and inspecting it, to see which element it takes you to in the console. — DBS, Jun 14 '21 at 14:19

orithena · Accepted Answer · 2021-06-15T13:20:06.210

0

Your #olark-box-wrapper is a div with position:absolute; top: 0; height:100%; z-index:9999999999; ... no wonder it's taking up the full height of the right window area on top of everything else. And even though it's a transparent div, mouse clicks are handled by the event handlers of that div, not by those of the elements below it.

You could add pointer-events: none; to that div, making it "transparent" to user interaction. You may have to add pointer-events: visible; to its childs, to avoid the pointer-events: none; attribute being inherited by the children.

Alternatively, you could change the layout so that the #olark-box-wrapper is exactly the same height as its children.

One note about your choice of z-index: this number might be a bit too high, see Minimum and maximum value of z-index? (tl;dr: keep it in the range of a signed 32-bit number).

edited Jun 15 '21 at 13:20

answered Jun 14 '21 at 14:27

orithena

1,455
1
10
24

I have tried that but that makes the chat box transparent and if you try to click on the text box it clicked on the things behind it. – Jun 14 '21 at 15:34
1

@Shultz That reads as if you didn't set `pointer-events: visible;` on the childs of `#olark-box-wrapper`; i.e. in your case, on `#side-chat`. Though it'd be easier to just select all childs: `#olark-box-wrapper > * { pointer-events: visible; }` – orithena Jun 14 '21 at 16:50

After div is expanded, no other buttons work in that vertical space

1 Answers1