I’m using Leaflet and a bootstrap navbar and I’d like to be able to resize the Leaflet map div when the viewport size changes.
My html is: (I have left out the sidebar and modal html as I don’t think it’s relevant)
<!DOCTYPE html>
<html lang="en">
<head>
<title>MyApp</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!--This link is required by L.easyButton-->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<!--Leaftlet CSS-->
<link rel="stylesheet" href="./css/leaflet.css">
<link rel="stylesheet" href="./css/easy-button.css">
<link rel="stylesheet" href="./css/L.Control.Sidebar.css">
<link rel="stylesheet" href="./css/MarkerCluster.css">
<link rel="stylesheet" href="./css/MarkerCluster.Default.css">
<!--Font Awesome CSS-->
<link rel="stylesheet" href="../fontAwesome/css/all.min.css">
<!--Document CSS-->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Main navbar -->
<nav class="navbar-inverse">
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 text-center">
<ul id="currentLocation" class="list-inline navbar-text navbar-left">
<li></li>
<li><p class="text-success"</p></li>
<li><button id="resetLocation" type="button" class="btn btn-primary active">Locate</button></li>
</ul>
</div>
<div class="col-lg-4 text-center text-primary text-uppercase">
<h2 id="appNameTitle">My App</h2>
</div>
<div class="col-lg-4 text-center">
<ul class="list-inline navbar-text navbar-right">
<li></li>
<li><select></select></li>
</ul>
</div>
</div>
</div>
</nav>
<!-- Leaflet Map div -->
<div id="map"></div>
<div id="preloader"></div>
<script src="./js/jquery3.6.0.js"></script>
<!--Preloader-->
<script type="application/javascript" src="./js/preloader.js"></script>
<!--Preloader-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="application/javascript" src="./js/leaflet.js"></script>
<script type="application/javascript" src="../fontAwesome/js/all.min.js"></script>
<script type="application/javascript" src="./js/easy-button.js"></script>
<script type="application/javascript" src="./js/L.Control.Sidebar.js"></script>
<script type="application/javascript" src="./js/leaflet.markercluster.js"></script>
<script type="application/javascript" src="./js/money.js"></script>
<script type="application/javascript" src="./js/script.js"></script>
<!--
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin="" defer></script>
-->
</body>
</html>
I’ve set map div height to 89vh for now as I can still view the map and the nav bar at full width but it’s only temporary as it doesn’t maintain it’s ‘fit to screen’ behaviour that I want.
CSS:
#map {
width: 100%;
height: 89vh;
}
When the browser window’s width is reduced the navbar will begin to stack and the map div will overflow down and have the lower part of the map clip.
I’d like to have the map’s div element resize it self automatically so that it always takes up the remaining available space after the nav bar resizes/ browser viewport changes. The nav bar doesn’t seem to be taken into account when I resize the browser window and I guess that it’s taking up the other 11% of vh.
I’ve tried putting the map div into another container-fluid and setting it’s size to auto and 100% but whatever I try it seems to require a fixed height in px or vh for the map div, which is not what I want.
Please help.