CODEWITHSUNDEEP
javascripthtmlcss
Webdeveloper_Jelle
Webdeveloper_Jelle

Reputation: 2856

Chatbox wrapper blocks click on button

I have a chatbox that shows and hides on click of the button.
As example I have some pages with some buttons that are behind the chatbox.
In this example the button is not clickable.
How do I fix this? The chatbox isn't even open and still the button is not clickable.
I want the button to be clickable when my chat is closed.
I tried to do this:

.wrap {
    bottom: 1em;
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 1em;
    z-index: -99; //////// doesn't work
 }

How is it even in front of my button?
Here you got my chat example with an example button.

    const btn = document.querySelector(".js-chat");

  const chatBox = document.querySelector(".js-chatbox");
  $("#chat-circle").click(function() {    
    $("#chat-circle").toggle('scale');
    $(".chat-box").toggle('scale');
  });

  $(".chat-box-toggle").click(function() {
    $("#chat-circle").toggle('scale');
    $(".chat-box").toggle('scale');
  });

  btn.addEventListener("click", () => {
      chatBox.classList.toggle("chatbox--is-visible");

      if (chatBox.classList.contains("chatbox--is-visible")) {
          btn.innerHTML = '<i class="fa fa-times"></i>';
      } else {
          btn.innerHTML = '<i class="fa fa-comments"></i>';
      }
  });
.wrap {
  bottom: 1em;
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 1em;
}
button{
  float: right;
  margin-top: 70px;
  margin-right: 20px;
}
.btn--chat {
  align-self: flex-end;
  background: #46A7B3;
  box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.15);
  color: #fff !important;
  display: block;
  font-size: 1.8em;
  margin-top: 0.5em;
  transition: all 300ms ease;
  text-align: center;
  height: 60px;
  width: 60px;
  border-radius: 50%;
}
.btn--chat:hover {
  background: #37848e;
}
.chatbox {
  border-radius: 0.5em;
  opacity: 0;
  order: -1;
  transition: all 300ms ease;
  transform-origin: 100% 100%;
  transform: scale(0);
  visibility: hidden;
  width: 300px;
  box-shadow: -2px 2px 15px 4px #222d32;
}
.chatbox__input {
  border-radius: 0.5em;
  border: 0;
  color: #555;
  font-size: 0.9rem;
  padding: 2em 1em;
  position: relative;
  resize: none;
}
.chatbox__input:required {
  box-shadow: none;
}
.chatbox__submit {
  background: none;
  border: 0;
  bottom: 0.75em;
  cursor: pointer;
  color: #3e54a4;
  font-size: 0.85rem;
  position: absolute;
  right: 0.5em;
}
.chatbox--is-visible {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}
.chat-box-header {
  background: #46A7B3;
  height:30px;
  border-top-left-radius:5px;
  border-top-right-radius:5px; 
  color:white;
  text-align:center;
  font-size:20px;
  padding-top:17px;
}
.chat-box-body {
  position: relative;  
  height:300px;  
  height:auto;
  border:1px solid #ccc;  
  overflow: hidden;
}
.chat-box-body:after {
  content: "";
  background: blue;
  opacity: 0.1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height:100%;
  position: absolute;
  z-index: -1;   
}
#chat-input {
  background: #f4f7f9;
  width:77%; 
  position:relative;
  height:47px;  
  padding-top:10px;
  padding-right:50px;
  padding-bottom:10px;
  padding-left:15px;
  border:none;
  resize:none;
  outline:none;
  border:1px solid #ccc;
  color:#888;
  border-top:none;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
  overflow:hidden;  
}
.chat-input > form {
    margin-bottom: 0;
}
#chat-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #ccc;
}
#chat-input::-moz-placeholder { /* Firefox 19+ */
  color: #ccc;
}
#chat-input:-ms-input-placeholder { /* IE 10+ */
  color: #ccc;
}
#chat-input:-moz-placeholder { /* Firefox 18- */
  color: #ccc;
}
.chat-submit {  
  position:absolute;
  bottom:5px;
  right:10px;
  background: transparent;
  box-shadow:none;
  border:none;
  border-radius:50%;
  color:#46a7b3;
  width:35px;
  height:35px;  
}
.chat-logs {
  padding:15px; 
  height:170px;
  overflow-y:scroll;
  background: #939393;
}

.chat-logs::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
}

.chat-logs::-webkit-scrollbar
{
  width: 5px;  
  background-color: #F5F5F5;
}

.chat-logs::-webkit-scrollbar-thumb
{
  background-color: #5A5EB9;
}



@media only screen and (max-width: 500px) {
   .chat-logs {
        height:20vh;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button> click me (doesnt work) </button>

<!-- Button trigger modal -->
<div class="wrap">
    <button class=" btn btn--chat js-chat"><i class="fa fa-comments"></i></button>
    <div class="chatbox js-chatbox">
        <div class="chat-box" style="display: block;">
            <div class="chat-box-header">
                Chat
            </div>
            <div class="chat-box-body">
                <div class="chat-box-overlay">
                </div>
                <div class="chat-logs">
                </div>
            </div>
            <div class="chat-input">
                <input type="text" id="chat-input" placeholder="message" DISABLED AUTOFOCUS>
                <button class="chat-submit" id="chat-submit" DISABLED><i class="fa fa-paper-plane"></i></button>
            </div>
        </div>
        <!--  End of .chatbox__form    -->
    </div>
    <!--  End of .chatbox.js-chatbox  -->
</div>
<!-- End of .wrapper -->

Upvotes: 0

Views: 764

Answers (2)

Every Screamer
Every Screamer

Reputation: 530

Scale function is doing that, because it holds its position even if its set to 0 it still has full width and height.. Opacity makes it only invisible but still holds the position.

If you want cool efect, dont use css class and use jquery funcion .fadeToggle().

Upvotes: 2

Dhananjai Pai
Dhananjai Pai

Reputation: 6005

Using display:none and display:block instead of using opacity should fix the issue.

The problem is with visibility(and opacity) the div is still above the button and prevents the event from reaching the button. with display property the div is completely removed from the DOM!

    const btn = document.querySelector(".js-chat");

  const chatBox = document.querySelector(".js-chatbox");
  $("#chat-circle").click(function() {    
    $("#chat-circle").toggle('scale');
    $(".chat-box").toggle('scale');
  });

  $(".chat-box-toggle").click(function() {
    $("#chat-circle").toggle('scale');
    $(".chat-box").toggle('scale');
  });

  btn.addEventListener("click", () => {
      chatBox.classList.toggle("chatbox--is-visible");

      if (chatBox.classList.contains("chatbox--is-visible")) {
          btn.innerHTML = '<i class="fa fa-times"></i>';
      } else {
          btn.innerHTML = '<i class="fa fa-comments"></i>';
      }
  });
.wrap {
  bottom: 1em;
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 1em;
}
button{
  float: right;
  margin-top: 70px;
  margin-right: 20px;
}
.btn--chat {
  align-self: flex-end;
  background: #46A7B3;
  box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.15);
  color: #fff !important;
  display: block;
  font-size: 1.8em;
  margin-top: 0.5em;
  transition: all 300ms ease;
  text-align: center;
  height: 60px;
  width: 60px;
  border-radius: 50%;
}
.btn--chat:hover {
  background: #37848e;
}
.chatbox {
  border-radius: 0.5em;
  opacity: 0;
  order: -1;
  transition: all 300ms ease;
  transform-origin: 100% 100%;
  transform: scale(0);
  visibility: hidden;
  width: 300px;
  box-shadow: -2px 2px 15px 4px #222d32;
display: none;
}
.chatbox__input {
  border-radius: 0.5em;
  border: 0;
  color: #555;
  font-size: 0.9rem;
  padding: 2em 1em;
  position: relative;
  resize: none;
}
.chatbox__input:required {
  box-shadow: none;
}
.chatbox__submit {
  background: none;
  border: 0;
  bottom: 0.75em;
  cursor: pointer;
  color: #3e54a4;
  font-size: 0.85rem;
  position: absolute;
  right: 0.5em;
}
.chatbox--is-visible {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
  display: block;
}
.chat-box-header {
  background: #46A7B3;
  height:30px;
  border-top-left-radius:5px;
  border-top-right-radius:5px; 
  color:white;
  text-align:center;
  font-size:20px;
  padding-top:17px;
}
.chat-box-body {
  position: relative;  
  height:300px;  
  height:auto;
  border:1px solid #ccc;  
  overflow: hidden;
}
.chat-box-body:after {
  content: "";
  background: blue;
  opacity: 0.1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height:100%;
  position: absolute;
  z-index: -1;   
}
#chat-input {
  background: #f4f7f9;
  width:77%; 
  position:relative;
  height:47px;  
  padding-top:10px;
  padding-right:50px;
  padding-bottom:10px;
  padding-left:15px;
  border:none;
  resize:none;
  outline:none;
  border:1px solid #ccc;
  color:#888;
  border-top:none;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
  overflow:hidden;  
}
.chat-input > form {
    margin-bottom: 0;
}
#chat-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #ccc;
}
#chat-input::-moz-placeholder { /* Firefox 19+ */
  color: #ccc;
}
#chat-input:-ms-input-placeholder { /* IE 10+ */
  color: #ccc;
}
#chat-input:-moz-placeholder { /* Firefox 18- */
  color: #ccc;
}
.chat-submit {  
  position:absolute;
  bottom:5px;
  right:10px;
  background: transparent;
  box-shadow:none;
  border:none;
  border-radius:50%;
  color:#46a7b3;
  width:35px;
  height:35px;  
}
.chat-logs {
  padding:15px; 
  height:170px;
  overflow-y:scroll;
  background: #939393;
}

.chat-logs::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
}

.chat-logs::-webkit-scrollbar
{
  width: 5px;  
  background-color: #F5F5F5;
}

.chat-logs::-webkit-scrollbar-thumb
{
  background-color: #5A5EB9;
}



@media only screen and (max-width: 500px) {
   .chat-logs {
        height:20vh;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 
      <button> click me (doesnt work) </button>

<!-- Button trigger modal -->
                  <div class="wrap">
        <button class=" btn btn--chat js-chat"><i class="fa fa-comments"></i></button>
        <div class="chatbox js-chatbox">
          <div class="chat-box" style="display: block;">
      <div class="chat-box-header">
      Chat
      </div>
      <div class="chat-box-body">
      <div class="chat-box-overlay">
      </div>
      <div class="chat-logs">
      </div>
      </div>
      <div class="chat-input">
      <input type="text" id="chat-input" placeholder="message" DISABLED AUTOFOCUS >
      <button class="chat-submit" id="chat-submit" DISABLED><i class="fa fa-paper-plane"></i></button>
      </div>
      </div>
          <!--  End of .chatbox__form    -->
        </div>
        <!--  End of .chatbox.js-chatbox  -->
      </div>
      <!-- End of .wrapper -->

Upvotes: 0

Related Questions