Problem with the bottom navigation area in Mobile Safari-15

Problem

When opening a modal with position absolute or fixed while the bottom navigation is collapsed, there remains an empty area in the bottom navigation section. This issue seems to be related to the browser area, making it difficult to remove using CSS or JavaScript.

Is there a solution to eliminate the empty area?

  • I tried setting the body position to fixed to prevent scrolling, but the problem persists especially when the body position is set to fixed.

Video demonstrating the Safari 15 bottom navigation area issue

javascriptcssmobile-safariios15

Answer №1

I encountered a similar problem while using Bootstrap version 4.1. To resolve it, I added the following CSS:

.modal .modal-dialog-centered {
        min-height: 100vh;
}

Additionally, I included the following CSS snippet:

html,body{
height:100vh;
}

Implementing these fixes helped me resolve the issues with modals on iOS.

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

How can I align inner boxes to the same level?

I would like the inner two divs to be positioned as: _________ _________ | | | | | | | | | | | | |_________| | | | | |_________| Usually, when they are both empty o ...

htmlcss

What is the best way to have an input automatically update its value to match its ID?

Can someone assist me with creating a button to display answers to questions using input boxes? I have assigned the IDs of the input boxes as the answers themselves, but I am facing issues trying to change the text to match their respective IDs. The curr ...

javascriptinput

Asynchronous loading of HTML templates using JQuery/JavaScript

Currently, I am in the process of creating a webpage that includes code snippets loaded from txt files. The paths and locations of these txt files are stored in a json file. First, the json file is loaded in, and it looks something like this: [ {"root":"n ...

javascriptjqueryhtmlasynchronous

Tips for verifying a login modal on an asp.net webforms using jQuery?

I am currently working on an asp.net webpage that utilizes a modal bootstrap for user login. Upon clicking the Login button, it should authenticate the user and initiate a server-side method called "ExportToZip" to download a zip file. My issue lies in ens ...

javascriptjqueryasp.netasp.net-ajax

Why am I unable to gather information from my nested React form?

Currently, I am developing a NextKs app with a form component. Within this component, some key/value pairs are nested (refer to the code snippet below). I initially believed that I could easily navigate through the elements in the form, but I encountered e ...

javascriptreactjsnext.js

Creating a MongoDB query using Mongoose to simulate JavaScript filtering operations (including filter and every) for searching with multiple terms

Introducing a New Search Feature In my current project, I am implementing a search functionality using MongoDB with Mongoose ODM. The existing codebase already has a search feature using JavaScript. Here is a snippet of the code: terms.every((term) => ...

javascriptnode.jsmongodbmongoose

How do I dynamically adjust class names for menu items as I scroll using jQuery?

I have a website with different sections identified by unique IDs, such as: <section id="home"> First Section </section> <section id="about_us"> Second Section </section> <section id="what_we_do&q ...

javascripthtmljquerycssbootstrap-5

Use a div element to occupy the available screen space

I'm curious if it's possible to create a div that fills the remaining space on a webpage. I have a website layout in mind with two main sections - one at the top and one at the bottom. If you have any suggestions on how to achieve this without ...

csshtml

Steps for aligning floating DIVs in the center of a parent DIV

Why is the text alignment not working as expected when I have three divs within a parent div that need to be center aligned? If you'd like to see the issue in action, check out this Demo fiddle <div class="container_alt"> <div class= ...

htmlcss

Animating toasts in Bootstrap

Exploring the options available at https://getbootstrap.com/docs/4.3/components/toasts/ To customize your toasts, you can pass options via data attributes or JavaScript. Simply append the option name to data- when using data attributes. If you're lo ...

javascripthtmltwitter-bootstrap

The error message from mongoose findbyId() states that the argument for "path" must be a string type, instead of an instance of a model

Here is the code I wrote using Express: app.get('/:id', async (req,res) => { const id = req.params.id; console.log(id) const bids = await Bid.findById(id) res.render(bids) }) This is the output I g ...

javascriptnode.jsmongodbexpressmongoose

Tips for preventing HTML ID clashes while integrating with the Document Object Model of external websites

When incorporating additional HTML elements into a webpage using Javascript or jQuery, along with external CSS declarations, it is important to avoid conflicts with existing IDs and class names already present on the page. This could lead to issues if ther ...

javascriptjqueryhtmlcssdom

Show fresh cards added in real-time on the Reactjs interface

I've been working on a project that involves fetching data and showcasing a list of custom-designed card components using map. Everything is functioning properly, but I encountered an issue where adding a new value to the array results in the new card ...

javascriptreactjstypescript

Navigating Between Web Pages

Hello there! I'm curious to learn how I can establish routing between multiple pages. Specifically, I have an index page and I'd like to navigate to other HTML pages within my views folder. Is it possible to achieve this without relying on the An ...

htmlcssangularjs

Issue with pagination and filtering in Smart-table.js

Presently, my focus is on developing functionality for Smart-table.js, which requires the following features: Retrieve JSON data from a web service Create a table with pagination and filtering capabilities Implement filters for individual columns or globa ...

javascriptangularjspaginationsmart-table

A guide on how to use Bootstrap to align elements at the center of a div container

My attempt to center an image in the div didn't quite work out as planned. Here's the snippet of my html and css: .col-xs-4 { background-color: lightgrey; width: 300px; height: 200px; border: 6px solid green; padding: 25px; margin: ...

htmlcsstwitter-bootstrap

Is there a way to configure flexbox so that its children wrap in a manner where several children are arranged alongside one specific child

My layout resembles a table using flexbox: +--------------+---------------+-----------------+---------------+ | 1 | 2 | 3 | 4 | | | | | | +---------- ...

htmlcssflexbox

Failed to cast value "undefined" to ObjectId in the "_id" path for the model "User"

I've been encountering an issue that I can't seem to resolve despite searching on Stack and Google. My ProfileScreen.js is meant to display a user's profile, but when attempting to view the profile, I receive this error: "Cast to ObjectId fa ...

javascriptnode.jsmongodbexpressmongoose

Creating a custom template in VueJS

How can I dynamically generate a specific template in the beforeCreate hook based on a given condition? I have three different roles in my application and I need to create a unique template for each role. ...

javascriptvue.js

Angular-Phonegap - The issue with "min-height: 100%" not functioning properly

I am faced with this specific HTML file: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <!-- NOTE: Make sure to remove the width=d ...

htmlcssangularjscordova