Bootstrap 5 tab has a Leaflet map which we want to fill all remaining space when selected. We got this working but now when changing tabs the area of the 1st won't go away.
We think it might be due to the ".tab-content > .tab-pane { display: none; }" property in CSS not being used or overridden as indicated by the strikethrough, but we don't know how to address this.
Simplified example:
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" type="text/css" href="template.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<ul class="nav nav-tabs d-flex" id="myTab">
<li class="nav-item"><button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button">Map</button></li>
<li class="nav-item"><button class="nav-link" id="table-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button">other tab</button></li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="mappanel">
<div id="mapid"></div>
<script>var myMap = L.map("mapid");
L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',}).addTo(myMap);
myMap.setView([20.210183, -87.460003], 20);</script>
</div>
<div class="tab-pane fade" id="profile">other tab content</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
CSS:
html, body, #mappanel { margin: 0px; height: 100%;}
body { display: flex; flex-flow: column wrap;}
#mappanel {flex: 1 1; order: 2; display: flex;}
#mapid, .tab-content {flex: 1;}
What are we doing wrong?
two mistakes
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" type="text/css" href="template.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<ul class="nav nav-tabs d-flex" id="myTab">
<li class="nav-item"><button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button">Map</button></li>
<li class="nav-item"><button class="nav-link" id="table-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button">other tab</button></li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home">
<div id="mappanel">
<div id="mapid"></div>
<script>var myMap = L.map("mapid");
L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',}).addTo(myMap);
myMap.setView([20.210183, -87.460003], 20);</script>
</div>
</div>
<div class="tab-pane fade" id="profile">other tab content</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
html, body, #mappanel { margin: 0px; height: 100%;}
body { display: flex; flex-flow: column wrap;}
#mappanel {flex: 1 1; order: 2; display: flex;}
#mapid, .tab-content {flex: 1;}
</style>