I am experiencing a CSS display issue on the mobile version of my map leaflet where only the header and footer are visible

I am experiencing a display issue on Android and iPhone due to conflicting css commands. Here's what's happening: I am using React + React Leaflet with a header, main, and footer all set to width 100% within a parent div with body set to width and height of 100%, displayed in flex column.

Within the main page (also in flex display), I have a Leaflet card set to 100% width and height to fill the space between the main and footer sections.

I initially set the header to 7vh, main to 85vh, and footer to 8vh (totaling 100vh). This setup worked fine on desktop and some iPhones, but on Android, the footer was hidden by the browser bar taking up screen space.

To address this, I changed the footer to 100% or auto to maximize size while keeping the header at 7vh and footer at 8vh. This fixed the issue on Android but caused the card to disappear on iPhone, resulting in an empty space...

Has anyone else faced this problem before?

(Note: I also set the root and html elements to 100% as parents of the body in React, and applied a reset CSS style.)

cssreactjsresponsive-designleaflet

Answer №1

  display: -webkit-box; /* Compatibility for older iPhones */
  display: -ms-flexbox; /* Compatibility for IE 10 */
  display: -webkit-flex;  /* Compatibility for newer iPhones */
  display: flex; /* Compatibility for Android devices */
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;

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

An effective way to transfer an Array from a Parent Component to a Child Component in React is by utilizing a Stateful Component

I'm currently developing a React project and facing the challenge of passing an array from a Parent component to a Child component using stateful components. Here is the code in App.js: import React, { Component } from 'react'; import &apo ...

reactjs

Arrange various Div elements of varying sizes in a predetermined sequence

I need to ensure that a large div maintains the same height as 20 other divs within the same container, when the screen size is between 1024px and 1920px in width. The challenge lies in arranging all these items in a floated layout grid that looks clean a ...

jqueryhtmlcssflexboxcss-grid

Issues encountered when implementing React setState in the componentDidMount lifecycle method

Do you know why the setState for popUpBurned is not functioning as expected? componentDidMount() { const { user } = this.props     const { popUpBurned } = this.state     const visits = user.visitsCounter     if (visits === 6 && !p ...

reactjssetstate

Steps for creating an expandable menu in the Magento category list

Looking for a way to create a category menu that expands when clicked on? Check out this example of a left menu (not Magento) at Can this be achieved with CSS alone? Or is there a specific module that can help with this functionality? ...

cssmagentowebshop

Receiving an eslint error while trying to integrate Stripe pricing table into a React web application

If you're looking to incorporate a Stripe documentation code snippet for adding a stripe-pricing-table element, here's what they suggest: import * as React from 'react'; // If you're using TypeScript, don't forget to include ...

reactjstypescriptstripe-paymentseslint

What is the determined method for calculating the pixel size of an SVG image?

Did you know that the Stackoverflow logo is actually an <a> element with a SVG image as its background? #hlogo a { text-indent: -999em; display: block; width: 200px; height: 50px; background-image: url("img/sprites.png?v=c4222387 ...

csssvg

What is the best way to ensure the image is centered on smaller screens for responsive design?

Greetings from a budding web developer seeking guidance... I've been grappling with positioning the image of a dog inside an iPhone frame at the center when the screen size is reduced (small to medium sizes) to enhance its appearance. Despite my effo ...

htmlcssresponsive-designfrontendbootstrap-5

Comparing OLOO and OO in ReactJS for front-end web development

After reading Kyle's book, I found it to be extremely informative. However, I am a bit perplexed by the discussion in "You Don't Know JS: this & Object Prototypes". The series argues that the "Object Linking to Other Object" design pattern is cl ...

javascriptreactjsdesign-patterns

A guide to adjusting the size of a mat-button using an svg mat-icon

I have PrimeNg and Angular Materials buttons on the same td. I am attempting to resize my mat-buttons to match the size of my pButtons but they are not adjusting properly. Should I consider using a different type of button with my icon? HTML <button ma ...

htmlcssangular

Using React with Typescript involves using the React.createElement method

I am facing an issue with a reference to a FunctionalComponent in my object. When I try to pass this reference into the createElement statement, it triggers a TypeScript error. Question: Why is this error occurring? Both Component and FunctionalComponent ...

reactjstypescript

The right padding on an HTML table is not functioning properly when the table width is larger than

I am facing an issue with a table that has multiple columns. I want each column to have the same width, resulting in the total table width being wider than the page width. This is fine as it prompts the browser to display a horizontal scrollbar. However, d ...

htmlcsshtml-table

I'm encountering an issue where the variable "user" cannot be found. This problem is arising while working with Firebase Auth alongside the most recent SDK version of Expo (SDK 42)

import { StyleSheet, Text, View } from "react-native"; import { NavigationContainer } from "@react-navigation/native"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import LoginScreen from " ...

reactjsfirebasereact-nativeexporeact-navigation

Turn off the ability for items in Isotope to be set to an absolute

Currently, I am customizing my portfolio and looking to implement my own method for positioning the portfolio items. The Isotope library typically uses absolute positioning with left and top properties to position portfolio elements. Even after trying to o ...

htmlcssjquery-isotope

How to address additional attributes received from the server in Next.JS

Encountering an error while trying to render a canvas with specified height and width within a child component in a NextJs app. The issue arises when attempting to integrate this mouse effect into my NextJS application. Everything functions correctly until ...

javascriptreactjsnext.jsserver-side-rendering

Tips for loading a unique class name on the initial active UI react component

Is there a way to load a class named "Landingpage" to the body tag or main container div only when the first tab/section (Overview page) is active? The tab sections are located in a child component. Any assistance would be appreciated. Click here for more ...

javascriptreactjsreact-router

Various formatting options on GitHub Pages

As a beginner in programming, I recently deployed my first project to github pages. However, I am facing two issues: While the desktop version of the site looks perfect, the cards on the home page appear unseparated on mobile and iPad devices. Despite try ...

htmlcssgithub-pages

Display loading spinner in Material-UI Table while fetching data

Is it possible to display a Circular progress indicator while waiting for data to populate the table? How can this be accomplished? Currently, the table shows No records to display until the data is retrieved from the server. https://i.stack.imgur.com/Ljq ...

javascriptreactjsreact-reduxmaterial-uiprogress-bar

Compact looped slideshow

Currently in the process of designing a website and looking to incorporate a unique photo gallery feature. The concept is as follows: The photo gallery will be displayed in a rectangular/box shape. There are a total of 10 photos, with only 7 initially vis ...

javascriptcss

Conceal the standard style class of the p:selectOneRadio element

On my xhtml page, I've implemented p:selectOneRadio. However, I'm struggling to remove the default style class .ui-helper-hidden-accessible, resulting in the radio button icons not being visible. Here's a snippet of my code: <p:selectOne ...

cssjsfxhtml

Delay the axios get request in the useEffect

Working with React JS, I have implemented a useEffect hook to request data from a database via an Express server when the page renders. However, if the server is down, the app will continue to make thousands of requests until it crashes. Is there a way to ...

javascriptreactjsexpressaxiosuse-effect