My bootstrap row consists of 4 columns (col-lg-3). One of the columns contains a tab-content element. The issue is that when I click on the next tab, the content overflows the box and does not render within the div width as intended.
I've attempted to add style="width:200px" to all the div containers within this column, but none of them adjust properly when I switch tabs.
https://i.sstatic.net/Ulynj.png
Tab Content Code:
<div class="col-lg-3 align-items-stretch">
<div class="card">
<div class="card-header bg-14">
<h2><?php echo $lang_top_airlines ?></h2>
</div>
<div class="card-body">
<div class="tab-content" id="nav-TopAirlines" style="width:250px">
<div class="tab-pane fade show active" id="nav-airlines-flights" role="tabpanel" aria-labelledby="nav-airline-flights">
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/includes/connections/mysqli.php";
require($path);
$sql = "SELECT count(*) as countLVM, lvm.luchtvaartmaatschappij AS naam, lvm.IATACode
FROM tbl_vluchtgegevens vg
LEFT JOIN tbl_luchtvaartmaatschappij lvm
ON vg.luchtvaartmaatschappij = lvm.luchtvaartmaatschappijID
WHERE vertrekdatum2 <=NOW()
GROUP BY lvm.luchtvaartmaatschappij
ORDER BY countLVM DESC
LIMIT 10";
$dataAF = $link->query($sql);
$dataPointsAF = array();
if ($dataAF->num_rows > 0) {
while($rowAF = $dataAF->fetch_assoc()) {
$pointAF = array("label" => $rowAF['IATACode'], "y" => $rowAF['countLVM'], "name"=> $rowAF['naam']);
array_push($dataPointsAF, $pointAF);
}
}
$link->close();
?>
<div id="TopAirlinesFlights" style="width: 200px; height: 300px;"></div>
</div>
<div class="tab-pane fade" id="nav-airlines-distance" role="tabpanel" aria-labelledby="nav-airline-distance">
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/includes/connections/mysqli.php";
require($path);
$sql = "SELECT lvm.luchtvaartmaatschappij AS naam, lvm.IATACode, SUM(vr.afstand) as SumDistance
FROM tbl_vluchtgegevens vg
LEFT JOIN tbl_vliegroutes vr
ON vg.vertrekluchthaven = vr.vertrekID
AND vg.aankomstluchthaven = vr.aankomstID
LEFT JOIN tbl_luchtvaartmaatschappij lvm
ON vg.luchtvaartmaatschappij = lvm.luchtvaartmaatschappijID
WHERE vg.vertrekdatum2 <=NOW()
GROUP BY lvm.luchtvaartmaatschappij
ORDER BY SumDistance DESC
LIMIT 10;";
$dataAirD = $link->query($sql);
$dataPointsAirD = array();
if ($dataAirD->num_rows > 0) {
while($rowAirD = $dataAirD->fetch_assoc()) {
$pointAirD = array("label" => $rowAirD['IATACode'], "y" => $rowAirD['SumDistance'], "name"=> $rowAirD['naam']);
array_push($dataPointsAirD, $pointAirD);
}
}
$link->close();
?>
<div id="TopAirlinesDistance" style="width: 200px; height: 300px;"></div>
</div>
</div>
<nav>
<div class="nav nav-fill nav-pills" id="nav-airline" role="tablist">
<a class="nav-item nav-link active" role="tab" id="nav-airline-flights" data-toggle="tab" href="#nav-airlines-flights" aria-controls="nav-airlines-flights" aria-selected="true"><i class="fas fa-plane-departure"></i> by Flights</a>
<a class="nav-item nav-link" role="tab" id="nav-airline-distance" data-toggle="tab" href="#nav-airlines-distance" aria-controls="nav-airlines-distance" aria-selected="false">
<i class="fas fa-map-marked-alt"></i> by Distance</a>
</div>
</nav>
</div>
</div>
</div>
Javascript Code Section:
<script type="text/javascript">
$(function () {
CanvasJS.addColorSet("blueShades2",
[
"#074b83",
"#085a9d",
"#0a69b7",
"#0b78d1",
"#0c87eb",
"#2196f3",
"#4daaf6",
"#79bff8",
"#a6d4fa",
"#d2eafd"
]);
var TopAirports = new CanvasJS.Chart("TopAirports", {
zoomEnabled: false,
axisX:{
reversed: true
},
animationEnabled: true,
colorSet: "blueShades2",
toolTip:{content: "{name}: {y}"},
data: [{
type: "bar",
indexLabelFontSize: 14,
indexLabel: "{y}",
indexLabelPlacement: "outside",
indexLabelOrientation: "horizontal",
dataPoints: <?php echo json_encode($dataPointsTA, JSON_NUMERIC_CHECK); ?>
}]
});
var TopAirlinesFlights = new CanvasJS.Chart("TopAirlinesFlights", {
zoomEnabled: false,
animationEnabled: true,
colorSet: "blueShades2",
axisX:{
reversed: true
},
toolTip:{content: "{name}: {y}"},
data: [{
type: "bar",
indexLabelFontSize: 14,
indexLabel: "{y}",
indexLabelPlacement: "outside",
indexLabelOrientation: "horizontal",
dataPoints: <?php echo json_encode($dataPointsAF, JSON_NUMERIC_CHECK); ?>
}]
});
var TopAirlinesDistance = new CanvasJS.Chart("TopAirlinesDistance", {
zoomEnabled: false,
animationEnabled: true,
colorSet: "blueShades2",
axisX:{
reversed: true
},
toolTip:{content: "{name}: {y}"},
data: [{
type: "bar",
indexLabelFontSize: 14,
indexLabel: "{y}",
indexLabelPlacement: "outside",
indexLabelOrientation: "horizontal",
dataPoints: <?php echo json_encode($dataPointsAirD, JSON_NUMERIC_CHECK); ?>
}]
});
TopAirlinesFlights.render();
TopAirports.render();
TopAirlinesDistance.render();
});
</script>