Tips for ensuring an element stays anchored at the bottom even when the keyboard is displayed

I recently encountered a situation on one of my pages where an element positioned at the bottom using absolute positioning was causing issues when the keyboard was opened, as it would move to the middle of the page unexpectedly.

While this may seem like a standard issue,

I am looking for a solution that keeps the element fixed at the bottom

This problem has been bothering me,

.container{
    position:relative;
    height:100%;
}
.myclass{
    position : absolute;
    bottom:0;
    margin:auto;
    display:flex;
    align-items:center;
}
javascripthtmlcssreactjs

Answer №1

When you utilize

display:flex;
flex-direction: column;

within your main container,

you can resolve the issue by adding margin-top: auto; to your .box element.

Don't forget to press the button! 

const container = document.querySelector('.container');

const addButton = document.querySelector('button');


addButton.addEventListener('click', () => {
    const newDiv = document.createElement('div');
    newDiv.style.height = "10rem";
    newDiv.style.width = "100%";
    newDiv.style.backgroundColor = "red";
    container.appendChild(newDiv);
})
*, 
*::before,
*::after{
    margin: 0;
}


body{
    min-height: 100vh;
}


.container{
    display: flex;
    flex-direction: column;
    text-align: center;
    width:375px;
    height: 100vh;
    margin: 0 auto;
    background-color: bisque;
}

.box{
    height: 5rem;
    width: 100%;
    background-color: blue;
    margin-top: auto;
}

button{
    position: absolute;
    width: 5rem;
    height: 5rem;
    top: 5rem;
    right: 5rem;
}
<div class="container">
      <h1>Enter text</h1>
      <div class="box"></div>
</div>
<button>Add new box</button>

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

Adjust the color of text, image, and background when the cursor hovers over

Is it possible to change the color of an image on hover by applying a filter like brightness(10)? I tried this, but it whitens all the button, so now I'm not sure how to change the icon color. One way to do it is: <div class="hello"><img ...

javascript

What are the methods for determining if a Triangle intersects a Box3?

Is there a built-in function in THREE.js to determine if a THREE.Triangle overlaps with a THREE.Box3 object? If not, what approach can be taken to achieve this? ...

javascriptthree.js

What could be causing my React button to stop functioning as a link to an external website when using anchor tags?

I recently created some buttons for my website using React. Initially, everything was working perfectly with the buttons, but suddenly they stopped functioning. Strangely, I didn't make any alterations to the code and I'm puzzled as to why they a ...

javascripthtmlcssreactjs

Using JavaScript to interact with text elements in external SVG documents

When it comes to creating an SVG within HTML and assigning specific IDs to text elements for easy access, everything works smoothly. For example, I can easily retrieve the ID using: let callQSO = document.getElementById("QSOcall").value; and th ...

javascripthtmlsvggetreact-native-svg

Steps for Adding an H1 Tag Using GWT

Forgive me for what may be a silly question, but I'm truly struggling to understand how to dynamically add an HTML heading tag to my page using the Google Web Toolkit. My motivation is not related to styling purposes, as any label can be styled. Inst ...

htmljquery-uigwt

Incorporating external API information into Google Maps

My current challenge involves creating a polygon on Google Maps using data obtained from an external API found at . Upon analyzing the API response, the following information is provided: { "id": 28, "name": "Local spots", "description": "", "isprivate": ...

javascriptjqueryajaxgoogle-mapsgoogle-maps-api-3

Guide on sending two dynamically generated select box values through ajax in order to retrieve values for a third select box

I am currently working on a task where I need to populate the 3rd select box based on the selections made in the first two select boxes, which have dynamic values. Below is the jQuery ajax code snippet that I have written (Please note that this code curre ...

javascriptphpjqueryajax

Reloading a webpage does not clear HTML tables containing jQuery interactions in Firefox

Apologies if this question has already been asked. I incorporated hide/unhide features using jQuery into a simple HTML table. The table functioned correctly in Chrome 24.0.1312.52 m and IE8+. Yet, upon refreshing the page in Firefox 15.0.1, the pr ...

jqueryhtmlfirefox

Ensure that only one button from the collection is activated

One of the features on my website includes 3 blocks with buttons. These buttons trigger a change in the displayed picture when clicked. However, it is crucial to ensure that when a new track is activated, the previous button returns to its original state. ...

javascripthtmlcssbutton

Creating an email in Gmail with a pre-filled HTML body

Currently, I am developing a Django web application and seeking a way to enable my app to send emails via Gmail. I have explored creating a hyperlink that opens the compose window in Gmail, as well as prepopulating fields such as "to," "cc," "bcc," and bod ...

pythonhtmldjangogmailhtml-email

Nested loops in JavaScript can be combined with promises to efficiently handle

I am facing a challenge in looping through an array that contains another array as one of the parameters. My goal is to iterate through this nested array according to specific requirements, and then execute a function once the parent loop is finished. Can ...

javascriptforeachpromise

How much memory is being used by a loop script?

I have developed a script in both PHP and Javascript that goes through a million iterations, breaking down a string into an array and storing the first element of that array into a new variable. Here is the PHP code: class First { public function Iterate ...

javascriptnode.jsmemoryphp

Issues with the functionality of jQuery event functions

My webpage retrieves content from a database using jQuery and AJAX. There are various processes on the page such as adding new content, editing, and deletion, all of which use AJAX. However, I am experiencing issues with event functions like click and mous ...

javascriptjqueryajax

Is there a way to create a function that is able to return both a value and a promise

Assume I need to fetch a value only if an object is already present in my model. Otherwise, I should retrieve the output of an endpoint service: model.getDoohkyById = function( id ){ if( this.data ) { if( this.data.length > 0) { ...

javascriptajaxangularjspromise

Achieving the desired display position in CSS3 with bootstrap: Steps to follow

I am attempting to create a unique icon by combining two different bootstrap icons together: https://i.stack.imgur.com/RWiQn.png Despite trying various margin adjustments like top and right, I have not been able to achieve the desired effect. Here is wha ...

htmltwitter-bootstrapcsspositionicons

What adjustments can be made to the Bootstrap code to prevent it from causing layout issues with the Signin Form and Footer?

Recently, I've encountered some challenges with the footer formatting on my website's home page and the sign-in form on a separate page. It appears that the Bootstrap framework at the top of the page is affecting these elements exclusively. How c ...

htmlcssbootstrap-4frontend

Uncertain about the distinction between reducers and dispatchers when it comes to handling actions

I'm feeling a bit confused regarding reducers and dispatchers. While both receive actions as parameters, it doesn't necessarily mean that the actions I use in my dispatchers are the same as those used in my reducers, correct? For example, if I h ...

javascripttypescriptdesign-patternsredux

"How can I update a table in Flask using Chart.js and Pandas

I have developed a basic Flask application that includes a bar chart using Chart.js and a data table displayed below it. Check out the setup below: https://i.sstatic.net/QB6jQ.png (Live view: ) The bar chart I created counts the number of items for each ...

javascriptpythonflaskchart.js

Guide on transferring href parameter from the parent Vue component to the child component

Hey there! I've been working on creating a Vue page, breaking it down into components, and populating it with content from json. It all seems pretty straightforward, but I've hit a snag. Why is the href parameter not showing up in the right place ...

javascripthtmlcssvue.jsvue-component

What is the best way to convert the value of "range" to floating point numbers in JavaScript?

Why is it that when I input a float number, like "3.4567890", as the value in an input field, it automatically gets converted to type 'int'? This conversion is not desired, as I want the value to remain as a 'number' or 'float&apos ...

javascripthtmlrange