The screen should smoothly slide upwards when the keyboard pops up, ensuring the footer remains und

Hello! I am currently in the process of developing a mobile app using HTML, CSS, Bootstrap, and JavaScript. I have encountered a slight issue where the keyboard does not automatically pop up and move the screen up when the user taps on the textbox in the footer, specifically on Android phones. However, this functionality works perfectly fine on iOS devices. I am attempting to implement a solution that would automatically scroll down to the bottom div when the user taps on the textbox.

<body onload="hidebtn()">
   <header class="topBar">
      <ul class="nav nav-tabs row" id="myTab" role="tablist">
         <li class="nav-item col">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="chat()">Chat</a>
         </li>
         <li class="nav-item col">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="ticketStatus()">Incident</a>
         </li>
         <li class="nav-item col">
            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="ticketStatus()">Service Request</a>
         </li>
      </ul>     
      </header>
     <br><br>
     <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
           <div class="container">
              <div class="row h-100">
                 <div id="topButtons" class="card-body" style="padding: 0; margin-top: 12px; height: 80px;"></div>
                 <div id="chatBody" class="card-body anyClass">
                    <p class="WC_message_fl"><img class="con_im" src="images\chatrobo.png"></p>
                    <p class="WC_message_fl sahlaIntro"> Type your Questions & Start chatting</p>
                    </br></br>
                 </div>
              </div>
           </div>

           <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" >
              </br></br>
              <p class="WC_message_fl" id='msg_table'></p>
              <div class="container" style="overflow-x:hidden;overflow-y:auto;height:84vh;"><div class="row"  id="table"></div>
              </div>
           </div>
        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab" >
           </br></br>
           <p class="WC_message_fl" id='msg_sr_table'></p>
           <div class="container" style="overflow-x:hidden;overflow-y:auto;height:84vh;"><div class="row" id="sr_table"></div></div>
            </div>
         </div>     

         <footer id="footerChtbt" style="position:fixed;bottom:0;right:0;left:0;line-height: 20px;background-color: #ECEFF1;font-size: 0.6rem;border-top: 1px solid #aaa;box-shadow: 0 1px 5px 0 #9B9B9B;">
           <span id="sahlaResp" style="color:blue; position: relative;left: 7vw;top:0;"></span>
           <div class="container">
              <div class="row">
                 <div class="col-10">
                    <input id="query" type="text" class="form-control" placeholder = 'Ask Sahla bot...'" onkeyup="pressedkey(event)" onClick="clickedQuery()" style="outline:0;box-shadow:none;font-size:14px;" required/>
                 </div>
                 <div class="col-2" style="padding: 0; margin-top: 2px;">
                    <img src="images/send_icon.svg" name="submitbtn" onClick="sendbtn()" style="cursor: pointer; width: 38px;">
                 </div>
              </div>
           </div>
        </footer>

I am striving to achieve automatic scrolling to the div upon clicking the textbox

function clickedQuery() {
    setTimeout(function(){ $("#chatBody").scrollTop($("#chatBody")[0].scrollHeight); }, 100);
};
javascriptjqueryhtmlcss

Answer №1

Upon reviewing your code, it appears that some cleaning up could benefit us. Could you please provide a link for us to effectively diagnose the issue? Nonetheless, with the limited information I have, I'll do my best to provide guidance.

From my experience, browsers tend to resize when the keyboard is opened on mobile devices. The content that appears "overlapped" by the keyboard can usually be accessed by scrolling down. The actual overlap occurs in apps that are set not to resize when the keyboard is opened. In such cases, it's best to avoid putting inputs that can be overlapped. However, if necessary, you can position them above the keyboard's top line when they receive focus.

To achieve this, you typically use position: fixed to position the input just above the bottom line of the viewport, aligning it with the top line of the keyboard.

Alternatively, if your content is still being overlapped, there may be other issues that need to be addressed, which I cannot inspect without an online version of your code. Another solution could involve using JavaScript to relocate your entire footer and style it accordingly for a better appearance.

Additionally, I suggest including a button that blurs the input field in case users decide not to submit, which can help close the keyboard. Here is an example

I hope this helps resolve your issue.

body {
margin: 0;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
background: #ccc;
}
input {
  margin: 6px;
}
input:focus {
  position:fixed;
  bottom: 0;
  width: calc(100% - 12px);
}
<footer>
  <input id="input" type="text">
</footer>

$('#input').on('focus', function(){
$(this).parent('footer').css('bottom', '50%');
});
body {
margin: 0;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
padding: 6px;
background: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<footer>
  <input id="input" type="text">
</footer>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Step-by-step guide to selecting a specific point on an HTML5 canvas using Python's selenium webdriver

Looking to automate interactions with a simple HTML5 application on a website using Selenium webdriver in Python with Firefox on Linux. The challenge is clicking a button on an HTML5 canvas, then dragging one or two objects around the canvas post-button cl ...

javascriptpythonhtmlseleniumbrowser-automation

The process of filtering arrays and utilizing the V-for directive in Vue.js

Utilizing Vue.js, I am attempting to iterate through an array of levels. I successfully received the response json in actions with a forEach function like: let filters = [] const array = response.data array.forEach((element) => ...

javascriptjsonvue.jsmultidimensional-arrayvuex

What is the best way to make jQuery not consider hidden elements?

Apologies for not sharing the code, as I know many of you prefer to see it. I am currently working on developing a comprehensive calculator for my small business, and I am aware that I am making several mistakes. I kindly request that you do not critique ...

jqueryhtmlcsshidden

How can you turn consecutive if statements into asynchronous functions in JavaScript?

In my code, I have a loop with a series of if statements structured like this: for( var i = 0; i < results_list.length; i++){ find = await results_list[i]; //result 1 if (find.Process == "one") { await stored_proc(38, find.Num, find ...

javascriptnode.jsecmascript-6

Tips for creating spacing between an image and a button when utilizing the routerLink feature in CSS

To enhance the user interface, I've utilized a routerLink with an image to navigate back to the home page, and a button to direct users to add a new customer. Now, I am aiming to create some space between these elements. Previously, I used "& ...

cssangular

Are there specific mathematical algorithms that lend themselves well to creating responsive HTML designs?

Tired of constantly guessing the percentage values to use with a specific number of divs and other elements in my design. I am looking to understand the mathematical calculations that determine the scaling required for different elements in order to main ...

javascripthtmlcsstwitter-bootstrapweb

"Encountered a Chrome RangeError: The call stack size limit was exceeded while utilizing jQuery's $

As part of my job, I am currently evaluating a web application that involves fetching a substantial amount of data from the server. The data is received as a JSON object using the $.ajax function. It contains numerous sub-objects which I convert into array ...

javascriptjquerygoogle-chromeweb-applicationsbrowser

Got a not-a-number (NaN) value for the `children` prop in a

Just starting out with React and working on a type racer app. I've encountered an issue while trying to calculate WPM (Words per minute) - the calculation keeps returning 'NaN'. I've double-checked all the variables and ensured there ar ...

javascriptreactjsjsx

Is there a way to replicate the functionality of $(document).ready for dynamically loaded AJAX content?

$(document).ready(handler) is triggered once the DOM has finished loading. However, if new content containing a $(document).ready(handler) function is added to the page via AJAX, this function will be executed immediately according to the jQuery API. It&ap ...

javascriptjqueryajax

What steps can be taken to address the error "console is undefined" in PowerShell?

I have a basic .js file saved on one of my drives that contains the following code: var x=3; function numSqaure(x) { return(x*x); } var sentence="The square of" + x + "is" + numSqaure(x); console.log(sentence); When attempting to run this script thro ...

javascriptpowershell

Adjust the container width to match the width of the visible thumbnails?

Take a look at my website over at: . If you want to see more thumbnails, consider switching to a different album. The album titled Paris contains the most images. If you press the "Show Photo Grid" button located in the bottom-right corner, you'll be ...

htmlcssthumbnails

Uninterrupted movement within a picture carousel

Seeking a way to create a smooth transition in an image slider with sliding dividers using continuous switching when clicking previous/next buttons. Currently, the dividers replace each other from far positions. Any ideas on achieving a seamless single mov ...

javascriptjqueryhtmlcss

The error code 13:5 indicates that the "Home" component has been registered in the Vue application but is not being used, leading to the error message "vue/no-unused-components"

I encountered this issue while working with Vue for the first time. I was attempting to construct a website using Vue/CLI by reorganizing and building from the inside out. However, I am unfamiliar with Vue and unsure how to resolve this error. The changes ...

javascripthtmlcssvue.js

Organizing JavaScript Scripts for Sequential Loading

I've been using JavaScript $ajax to load multiple scripts asynchronously, but I'm facing an issue where they load in a random order instead of the specified order. Here is the current code snippet: loadScripts(); function loadScripts() { g ...

javascriptjqueryajax

Alignment of Nested Accordions using BootStrap: Right Justified

I have a nested accordion that resembles the following structure: https://i.sstatic.net/HT6kS.png However, I am seeking to align them to the right so that all collapse arrows are in line. In my Plotly Dash implementation, the code looks like this: d = {& ...

cssaccordionplotly-dashbootstrap-5bootstrap-accordion

Set a unique class for several elements depending on a given condition

Is there a way to assign a color class based on the element's value without looping through all elements? Check out my jsfiddle HTML <div> <ul> <li class="MyScore">90</li> <li class="MyScore"> ...

javascripthtmlcss

Ways to exit the current browser window?

Is there a way to close the current browser window using JavaScript or another language that supports this functionality? I've tried using the window.close() function, but it seems to only work for windows opened with window.open(). Thank you in adv ...

javascriptphpjqueryhtmlajax

What is the process of Defining an Element Based on Two Attributes in C#?

Is it feasible to specify a web page element based on two attributes? For example, I can locate the element by its innertext Element imagePage = ActiveBrowser.Find.ByContent(pageNumbers[p],FindContentType.InnerText); Alternatively, I can identify an ele ...

c#javascripthtmlasp.net

Preserving alterations to media files using an image cropper

I've created a special controller for an image cropping tool that pops up over a media item in the content section. Right now I can manipulate the crops in the overlay, but when I click "Save Crops", the changes don't stick. However, if I use the ...

javascriptangularjsumbraco

Modify the active link color in a Bootstrap menu by adjusting the CSS

Hi, I'm experiencing an issue with my CSS Bootstrap menu. I am unable to change the active link color, meaning that when I click on a link and move my mouse pointer out of the area, the link background turns white. I would like it to remain transparen ...

csstwitter-bootstrap