0

I have a chatbot window and have to position that on fixed right-bottom. I have put CSS settings below for fixed positioning as well as viewport settings.

The chat windows in CSS fixed bottom right is having a textbox at the bottom.

In Android devices, when that textbox is in focus, the soft keypad is appearing over the textbox, without the normal behavior of the movnig webpage above and positioning textbox above the keypad. So users cannot see what they are typing.

Screenshot : https://ibb.co/G0mNQV8

When I changed the CSS position of the chat window to absolute, then keypad in focus works fine as usually. But when not in focus if scrolled, the entire chat window is moved up, instead of being fixed in bottom-right.

I need to fix both cases, to gain normal behavior of soft keypad in focus and also, fixed positioning.

Please refer to the following code snippets and if you can help to resolve it, it would be great.

@viewport {
  min-width: device-width ;
  zoom: 1.0 ;
  initial-scale:1.0;
  maximum-scale:1.0;
  user-scalable:1.0;
} 
@-ms-viewport {
  min-width: device-width ;
  zoom: 1.0 ;
  initial-scale:1.0;
  maximum-scale:1.0;
  user-scalable:1.0;
} 
#live-chat {
    display:none;
    bottom: 0;
    right: 0;
    position: fixed;  
    width: 99% !important;
    max-width:350px;
    max-height:100vh;
    background: #e9e9e9;
    color: #eae2e2;
    font: 100%/1.5em "Droid Sans", sans-serif;
    margin: 0;
    z-index: 10000;    box-shadow: 0px 0px 20px 4px #ccc;
}

<div id="live-chat-container">
    <div id="live-chat">



        <header class="clearfix">



            <a href="javascript:void(0);"  onclick="hidechat();" class="chat-close">x</a>



            <h4> <img src="https://www.xxxx.com/chat/cf-icon.png" width="32px" style="display:inline;vertical-align:middle;"> Chat with Us</h4>



            <span class="chat-message-counter">3</span>



        </header>



        <div class="chat">



            <div class="chat-history">


            </div> <!-- end chat-history -->



            <p class="chat-feedback" style="display:none;">Your partner is typing?</p>



            <form action="#" method="post" onsubmit="return chatsend();">

                <fieldset class="cbtgroup">

                    <input type="text" placeholder="Type your message?" id="cbt"  autocomplete="off"><input type="submit" value="&raquo;" class="cbt" id="cbtbtn">

                </fieldset>

            </form>
            <div style="font-size:xx-small;text-align:center;"><a href="https://www.xxxx.com" target="_blank">Powered by xxx.com</a></div>

        </div>



    </div> <!-- end live-chat -->
GUIR
  • 61
  • 1
  • 7

1 Answers1

0

I found a solution for the issue and posting it here as it will be helpful for anyone having the same issue.

  1. I did wrap chat window outer div, with an extra div, gave it fixed position and top, bottom 0.

  2. Then changed the position of chat window div to 'relative and have height of 93.9% of its container.

  3. Above two helped to fix both scrolling issue (to keep chat window fixed to bottom right) and avoiding soft keypad to covering textbox

  4. In android another issue was noted after this, soft keypad was appearing even after textbox loses its focus, so used following js function taken from here .

#live-chat-wrapper{
    bottom: 0;
    right: 0px;
    position: fixed;
    width: 99% !important;
    max-width:351px;
    max-height:484px;
    margin: 0;
    z-index: 100000;
    -webkit-transform: translate3d(0,0,0);
}

#sigiriyalive-chat {
    display:none;
    bottom: 0;
    right: 0px;
    position: relative;
    width: 99% !important;
    max-width:350px;
    height: 93.9%;
    transition: height 1s ease;
    background: #e9e9e9;
    color: #eae2e2;
    font: 100%/1.5em "Droid Sans", sans-serif;
    margin: 0;
    z-index: 1000001;
    box-shadow: 0px 0px 20px 4px #ccc;
}

<div id="live-chat-wrapper">
    <div id="live-chat">
        <header class="clearfix">
            <a href="javascript:void(0);"  onclick="hidechat();" class="chat-close">x</a>
               <h4> <img src="https://www.wm.xxx.com/chat/xx-icon.png" width="32px" style="display:inline;vertical-align:middle;"> Chat with Us</h4>
            <span class="chat-message-counter">3</span>
        </header>
        <div class="chat">
            <div class="chat-history">
            </div> <!-- end chat-history -->
            <p class="chat-feedback" style="display:none;">Your partner is typing?</p>
            <form action="#" method="post" onsubmit="return chatsend();">
                <fieldset class="cbtgroup">
                    <input type="text" placeholder="Type your message?" id="cbt"  autocomplete="off"><input type="submit" value="&raquo;" class="cbt" id="cbtbtn">
                </fieldset>
            </form>
            <div style="font-size:xx-small;text-align:center;"><a href="https://www.xx.com" target="_blank">Powered by xx.com</a></div>
        </div> <!-- end chat --> 
    </div> <!-- end sigiriyalive-chat -->
</div>

function hidekeyboard() {
  //this set timeout needed for case when hideKeyborad
  //is called inside of 'onfocus' event handler
  setTimeout(function() {

    //creating temp field
    var field = document.createElement('input');
    field.setAttribute('type', 'text');
    //hiding temp field from peoples eyes
    //-webkit-user-modify is nessesary for Android 4.x
    field.setAttribute('style', 'position:absolute; top: 0px; opacity: 0; -webkit-user-modify: read-write-plaintext-only; left:0px;');
    document.body.appendChild(field);

    //adding onfocus event handler for out temp field
    field.onfocus = function(){
      //this timeout of 200ms is nessasary for Android 2.3.x
      setTimeout(function() {

        field.setAttribute('style', 'display:none;');
        setTimeout(function() {
          document.body.removeChild(field);
          document.body.focus();
        }, 14);

      }, 200);
    };
    //focusing it
    field.focus();

  }, 50);
}
GUIR
  • 61
  • 1
  • 7