Bootstrap 5 tab features a Leaflet map that we intend to occupy all remaining space once selected. We managed to achieve this, but now, when switching tabs, the content area of the first tab does not disappear.
We suspect that the issue might be related to the CSS property ".tab-content > .tab-pane { display: none; }" either not being utilized correctly or getting overridden, as indicated by the strikethrough. However, we are unsure how to rectify this.
Here is a 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cea2abafa8a2abba8effe0f9e0ff">[email protected]</a>/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b373e3a3d373e2f1b6a756c756a">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64060b0b10171016051424514a554a54">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d4f4242595e595f4c5d6d18031d031d004f48594c1f">[email protected]</a>/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 could be the problem?