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

Is there a way to insert a colored square into a <button> tag rather than text?

Looking for help with the following HTML: <button name="darkBlue" onclick="setThemeColor(this.name)">Blue</button> <button name="black" onclick="setThemeColor(this.name)">Black</button> I'm interested in replacing the text on ...

htmlcss

Maximizing cell background color in HTML table with limited width fails to function properly

Having difficulty turning the header cells (th) with background-color applied? It seems like the color bar may be too small, the cell width too large, or the background isn't being affected properly. Is there a way to create a narrow cell with long t ...

csshtml-tablerotationbackground-color

Dealing with rowspan and colspan issues in Internet Explorer

Currently, I am facing the challenge of creating a table with a complex system of colspans and rowspans. If you want to take a look at it, you can view it here This is the HTML code for the table: <table cellspacing="0" cellpadding="0" style="table-la ...

cssinternet-explorerhtml-tableinternet-explorer-11

Is it possible to generate AMP pages using React server-side?

After experimenting with rendering the AMP page by generating HTML on the server using React, I have successfully created a component that fetches data from the API and renders the necessary amp tags. The component is responsible for producing a plain HT ...

javascriptreactjsamp-html

Improving the App() function in React and Typescipt

When working on my React/Typescript app, I encountered a challenge with the length of the code in one of the sections. Despite watching tutorials and searching for solutions, I couldn't find a clear way to refactor it. The specific issue is with refa ...

javascriptreactjstypescript

The value retrieved from the event handler function's state does not match the anticipated value

While debugging, I often minimize this particular component to understand its behavior later on. It was quite challenging to pinpoint the issue due to some intricate logic in place. Nonetheless: import { useContext, useEffect, useState } from "react&q ...

javascriptreactjsnext.jswebsocket

Send the user to the appropriate subdomain within a ReactJs application

I'm currently working on a React website project where I want to assign a unique subdomain to each user after they sign up based on the username they input. For example, if their username is john, then their subdomain would be john.mydomain.com. I&ap ...

node.jsreactjsmongodb

Formik Error: The property 'submitForm' is undefined and cannot be read

I followed the example provided in this link (I'm working with NextJS). However, when using useFormikContext, I encountered an error message saying "TypeError: Cannot read property 'submitForm' of undefined". The version of Formik I currentl ...

reactjsnext.jsformik

In React and TypeScript, when I pass a state as a prop, the data fails to render

Here is the useState function for managing the Data Interestingly, removing this state from the code doesn't affect rendering at all. const [cart, setCart] = useState([] as Product[]); This piece of code handles Mapping and Rendering the Data <Sin ...

reactjstypescript

Customize React Material UI styling with withStyles

I'm currently involved in a project where I am using React Material UI and need to change the border bottom color of the Select component when it is focused. Here's the code snippet that I have implemented so far. import { Select as MuiSelect, w ...

reactjsmaterial-uireact-with-styles

Update class name in React component based on state change

My current setup involves the setting of active and class flags as shown below: constructor(props) { super(props); this.state = {'active': false, 'class': 'album'}; } handleClick(id) { if(this.state.active){ this.s ...

javascriptreactjs

Activate modifications in a distinct column?

I've been exploring a solution to achieve a similar functionality where clicking or hovering on headings in a column brings up corresponding text in another column. My idea is to use list items with a carousel for this purpose, but I'm facing so ...

javascripthtmlcss

Overlap of columns within a nested flexbox arrangement

While working with React and Styled Components, I encountered a problem of elements overlapping each other: https://i.stack.imgur.com/RuCYu.png There are a few instances of overlap, including: The padding below the <ul> element is colliding with ...

javascripthtmlreactjscssflexbox

What is the best way to highlight titles that are unique but still prominent?

.test{ display:none; } .title:nth-child(odd){ background: #ddd; } <div class='title'>lorem</div> <div class='title'>lorem</div> <div class='title test'>lorem</div> <div class='tit ...

htmlcss

Newbie inquiry: How to utilize classes in HTML for CSS implementation?

I'm a beginner in the world of HTML and I have what might be considered as a basic question... Here is the style definition for my header in the CSS file: h1.heading { color: indianred; } I attempted to link it to my HTML file like this, but unfo ...

htmlcss

Encountering a 404 error on React production router following a thorough refresh with

In my index.js file, I have defined the following routes: <Router history={customHistory}> <div className="row"> <Switch> <Route exact path="/login" component={Login}/> <Route ...

reactjsfirebasefirebase-hosting

Conflicting styles occur when trying to align images using both TailwindCSS and CKEditor 5

My current project involves using Laravel 10 with Vite as the asset builder and Tailwind for CSS. The app.css file contains the following code: @tailwind base; @tailwind components; @tailwind utilities; I am currently implementing a text editing feature u ...

cssckeditortailwind-cssckeditor5laravel-10

The beautiful synergy between Vuetify's v-input component and overflow animation

I am having trouble implementing an overflow animation on vuetify's v-text-field component. Despite my efforts, I can't seem to make it work as intended: <script setup> const text = 'very long long long long long text' </scri ...

cssvue.jsvuetify.jsvuetifyjs3

PHP - designate a separate folder for script and style resources

There seems to have been some discussion about this issue before, but I am struggling to find a solution. I want to add css, js, and asset files to my php framework. However, when calling these files, the path must always match the folder structure like t ...

javaphpcssassets

Is it necessary to install Firebase from npm when using axios with Firebase?

I have integrated axios into my project as follows: Within the src/ directory, I created a file named axios.js with the following contents: import axios from 'axios'; const instance = axios.create({ baseURL : 'https://myprojectname-11 ...

reactjsfirebaseaxios