I have a leaflet map in a div. However, on mobile the map is not showing. I've tried using flex but it doesn't work.
Any idea how to solve this ?
var map = L.map('map').setView([45.505, -73.19], 9); // Set initial coordinates and zoom level
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);* {
box-sizing: border-box;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
}
#table-container {
height:350px;
overflow:auto;
margin-top:20px;
margin-bottom: 20px;
}
h5, h4, h2{
font-weight: bolder;
text-align: center;
}
/* Proposed solution by @jla */
.map {
/* position: absolute */
width: 100%;
flex-basis: 200px;
}
.table-header{
font-size: x-small;
text-align: center;
}
p{
color: gray;
font-size: small;
text-align: center;
}
.data-rental{
text-align: center;
font-size: 60px;
}
.logo {
width: 200px;
height: 49px;
}
@media only screen and (min-width: 1800px) {
html, body {
min-height: 100vh;
width: 100%;
overflow: auto;
}
.main-data{
text-align: center;
}
* {
box-sizing: border-box;
font-family: 'Lucida Sans';
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
h5, h4, h2{
font-weight: bolder;
text-align: left;
}
/* For desktop: */
.col-1 {width: 10%; align-items:normal;}
.col-2 {width: 16.66%; align-items:normal;}
.col-3 {width: 25%; align-items:normal;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 65%; display: block;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%; align-items:normal;}
.column {
text-align:center;
background-color: white; /* Change the background color as needed */
color: black; /* Change the text color as needed */
float: left;
padding-top: 20px;
vertical-align: center;
}
.table-header{
font-size: x-small;
text-align: center;
}
.table-container {
height:300px;
overflow:auto;
margin-top:20px;
margin-bottom: 20px;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.logo {
width: 200px;
height: 49px;
}
.left-sidebar {
position: absolute;
padding: 10px;
bottom: 0;
left:0;
background-color: white; /* Change the background color as needed */
color: black; /* Change the text color as needed */
height: calc(100vh - 200px);
}
.right-sidebar {
position: absolute;
display:block;
right: 0;
background-color: white; /* Change the background color as needed */
color: black; /* Change the text color as needed */
height: calc(100vh - 160px);
overflow-y: scroll;
}
.div-selectors{
padding-bottom: 5px;
float: left;
}
.selectors{
width:100%;
float: left;
}
.data-rental{
text-align: right;
font-size: 60px;
float: right; /* add this */
}
#wrapper {
overflow: hidden; /* add this to contain floated children */
padding: 10px;
}
#data-desc {
width: 66%;
text-align: justify;
float:left; /* add this */
}
.data-container{
padding: 20px;
}
#data-header{
padding-top: 5px;
padding-bottom: 5px;
}
p{
color: gray;
font-size: small;
text-align: left;
}
.map {
flex: 1;
height: calc(100vh - 260px);
margin-bottom: -15px;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Website Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<link rel="stylesheet" href="leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.css">
<link rel="stylesheet" href="leaflet/dist/MarkerCluster.css">
<link rel="stylesheet" href="leaflet/dist/MarkerCluster.Default.css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.5/typeahead.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.min.js"></script>
<script src="leaflet/dist/leaflet.markercluster-src.js"></script>
<script src="leaflet/dist/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="css/mobile-app.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js"></script>
</head>
<body>
<div class="col-12">
<header>
<div>
<h5 style="font-weight: bold;">Title</h5>
</div>
</header>
</div>
<div class="col-1">
<div class="left-sidebar col-1">
<div>
<h5>Filter</h5>
</div>
<div class="div-selectors">
<h5>Region</h5>
<form action="" method="POST" enctype="multipart/form-data">
<select id="reg" class="selectors" type="hidden" style="width:150px">
<option></option>
</select>
</form>
</div>
<div class="div-selectors">
<h5>Metro</h5>
<form action="" method="POST" enctype="multipart/form-data">
<select id="rmr" class="selectors" type="hidden" style="width:150px">
<option></option>
</select>
</form>
</div>
<div class="div-selectors">
<h5>City</h5>
<form action="" method="POST" enctype="multipart/form-data">
<select id="muni" class="selectors" type="hidden" style="width:150px">
<option></option>
</select>
</form>
</div>
</div>
</div>
<div class="col-8 main-container">
<div class="container-fluid main-data">
<div class="col-3 column">
<h3 id="tot">·</h3>
<h5 class="main-data">1</h5>
</div>
<div class="col-3 column">
<h3 id="str">·</h3>
<h5 class="main-data">2</h5>
</div>
<div class="col-3 column">
<h3 id="ltr">·</h3>
<h5 class="main-data">3</h5>
</div>
<div class="col-3 column">
<h3 id="pcltr">·</h3>
<h5 class="main-data">4</h5>
</div>
</div>
<div class="map" id="map"></div>
</div>
<div class="col-3">
<div class="right-sidebar col-3">
<!-- Right sidebar content goes here -->
<div id="data-header">
<h5>More infos</h5>
<h2 id="geo-viz"></h2>
</div>
<div></div>
<h5>Table</h5>
<div class="table-container">
<table class="table">
<thead>
<tr>
<th scope="column" class="table-header">1</th>
<th scope="column" class="table-header">2</th>
<th scope="column" class="table-header">3</th>
<th scope="column" class="table-header">4</th>
</tr>
</thead>
<tbody id="data-table">
</tbody>
</table>
</div>
<div id="data-header">
<h5>Data title 1</h5>
<div id="wrapper">
<div id="data-desc">
<p></p>
</div>
<div class="data-rental"></div>
</div>
</div>
<div id="data-header">
<h5>Data title 2</h5>
<div id="wrapper">
<div id="data-desc">
<p></p>
</div>
<div class="data-rental"></div>
</div>
</div>
</div>
</div>You are using flex to show the map in a column. By default flex shrinks the item to the minimum size for its content's flow. Since Leaflet maps are displayed with position: absolute, there is no content with flow and so the wrapper element gets shrunk to have a width and height of 0.
You need to set the dimensions of the map. You can set the width to be 100%, and this will expand it to the width of its parent. However the height cannot be a percentage, as this will still be shrunk to 0px. You need to set it to a fixed size (eg 200px), or it could be a percentage of the viewport height (eg 80vh).
Since you're using flex, you also cannot use height to set the height. You'll have to use flex-bases, or perhaps min-height.
Change the .map rules in your CSS and remove flex and height.
.map {
width: 100%;
flex-basis: 200px;
}
You were also setting the height to calc( 100vh - 255px ). This may have issues on some screens where the viewport height is only slightly larger than 255px. A more robust solution might be to set a minimum height for the map. Eg to set a minimum height of 200px, you'd do:
flex-basis: calc( max( 200px, calc( 100vh - 255px ) ) )