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

Generating an instance of an enum using a string in Typescript

Having trouble accessing the enum members of a numeric enum in TypeScript using window[name]. The result is an undefined object. export enum MyEnum { MemberOne = 0, MemberTwo = 1 } export class ObjectUtils { public static GetEnumMembers(name ...

javascripttypescriptenums

Creating an array with conditional elements in React involves utilizing the map method along with a conditional

My array, named tableFilterFields, looks something like this: const tableFilterFields = [ { label: "Start Date", name: "StartDate", type: FilterControls.DatePicker, defaultValue: new Date(new Date().setDate( ...

javascriptarraysreactjsreact-hooks

Adjust the navigation height to be proportional to the main content size

I've been attempting to make my navigation menu take up the entire page, but I have yet to achieve success: My goal is for the green menu section to extend down to the footer. Here is the HTML code: <div ...

htmlcss

Preventing jQuery slideToggle functionality from toggling multiple elements at once

I am currently working on a project where I have a series of images with captions that appear underneath each one. To show or hide the caption for each image, I am using slideToggle when the image is clicked. $('.imageholder').click(function() ...

javascriptjquerycssslidetoggle

Utilizing variables in GraphQL requests

UPDATE: see the working code below GraphiQL Query I have this query for retrieving a gatsby-image: query getImages($fileName: String) { landscape: file(relativePath: {eq: $fileName}) { childImageSharp { fluid(maxWidth: 1000) { base64 ...

javascriptreactjsgraphqlgatsby

Pattern matching using regex can also be used to restrict the number of characters allowed

Having some trouble with regex to match a specific pattern and also limit the number of characters: Let's say I have allowed number prefixes: 2, 31, 32, 35, 37, 38, 39, 41, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60 I only want numb ...

javascriptangularjsregex

Personalize the arrangement of the list

I'm currently working with the rest-admin Framework and I am looking to make some layout changes to the lists while adding a custom component. At the moment, the layout looks like this: What I aim to do is include a quick search component and have t ...

reactjsmaterial-uiadmin-on-restreact-admin

problems arising from the alignment of floating divs

I am struggling with aligning the image "logo.jpg" in a left-floated div. How can I center it both vertically and horizontally within the code below? Thank you. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm ...

css

Is there a way to recycle an image and ensure that the web browser only needs to download it once?

Is there a way to effectively reuse the same image multiple times on my website without inefficiently downloading it each time? ...

phpjavascripthtmlcssimage

Exploring the capabilities of data processing in Node.js

I've been attempting to read data from a locally stored JSON file, organize it into individual JS objects, and add them to a queue. However, I'm struggling to find a way to test my parsing function to ensure it's functioning correctly. My cu ...

javascriptnode.jsjsonfs

Remove duplicate JSON records in JavaScript by comparing and filtering based on identical attributes

Looking to remove duplicates from a JSON object [{id:1,name:a, cat:1},{id:1, name:a, cat:2},{id:2, name:b, cat:8}] I want to keep only the first occurrence of each duplicated id [{id:1,name:a, cat:1},{id:2, name:b, cat:8}] ...

javascriptjson

Troubleshooting: jQuery toggle() issue in Firefox 3.0.12

My jQuery code for toggling is working perfectly in IE6 but not in FF3. I'm wondering what could be causing this issue and if there is a workaround available. <button>Toggle Me</button> <p>Hi</p> <p>Learning jQuery&l ...

javascriptjquery

Adjusting the placement in Draw2D

I'm a newcomer to this library and I'm struggling to figure out how to properly size and position the canvas. If anyone could provide guidance on the best way to do this, I would greatly appreciate it. $(window).load(function () { // se ...

javascriptdraw2d-js

Discover the secrets to dynamically swapping out all columns in a Data Table with Angular2+

Whenever changes or events occur outside of the Data Table, my requirement is to replace all the columns. When the data table is displayed for the first time, it shows selected columns based on an event. However, if I select another option, the new column ...

javascriptangulardatatableangular-datatables

Using Ajax, the script triggers calls upon detecting keyup events on various input fields, each

I'm encountering issues while attempting to solve this logic puzzle. The page contains multiple fields and the goal is to store the input values in the database when the user finishes typing. Here's the code snippet: var debounce = null; ...

javascripthtmljqueryajax

What sets Import apart from require in TypeScript?

I've been grappling with the nuances between import and require when it comes to using classes/modules from other files. The confusion arises when I try to use require('./config.json') and it works, but import config from './config.json ...

javascripttypescriptmodulerequirees6-modules

Make sure to prevent losing the global status in Vuex and VueRouter when the page is refreshed

As I develop a Single Page Application (SPA), I am utilizing Vuex to manage session states on the client side. However, I have noticed that the state resets whenever the browser is manually refreshed. Is there a way to prevent this behavior without relying ...

javascriptvue.jsvue-routervuex

A DIV element may not have any visible height, even when it contains content

My <div> contains multiple <img> elements, each wrapped in its own inner <div>. Despite setting the outer div's height to auto, it fails to adjust dynamically based on the content. To display the inner divs inline, I've applied ...

csshtml

Transitioning from componentDidUpdate to Hooks

I am currently in the process of converting this life cycle method into a hook: componentDidUpdate = prevProps => { const { notifications, popNotification } = this.props; if (prevProps.notifications.length >= notifications.length) return; ...

reactjsreact-reduxmaterial-uireact-hooks

How to Implement a Loop Inside a JavaScript Alert or Prompt?

Seeking clarity: Is it possible to embed code into an alert() or prompt()? For example, is there a way to include a loop or add data to the alert() or prompt just before execution or during execution? -Appreciate any help ...

javascriptloopsalerts