I am creating a site with tabs using style element of tab and tab content.
In one of the tabs content, i want to use a flex container to control display of various elements - tables, graphs and text.
On a standalone page without the tab, it works fine but when i am trying to use it in the main page within the tabs content, it is stacking up the divs one above the other.
My style.css file is as below:
// style file for use in all the php files for this site.flex-container { display: flex; flex-wrap: wrap; background-color: DodgerBlue;}.flex-container > div { background-color: #f1f1f1; width: 45%; margin: 5px; text-align: center; line-height: 75px; font-size: 30px;}table { border-collapse: collapse; width: 100%;}th, td { text-align: left; padding: 8px;}tr:nth-child(even) {background-color: #f2f2f2;}/* Style the tab */.tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1;}/* Style the buttons that are used to open the tab content */.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s;}/* Change background color of buttons on hover */.tab button:hover { background-color: #ddd;}/* Create an active/current tablink class */.tab button.active { background-color: #ccc;}/* Style the tab content */.tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none;}.flex-container { display: flex; flex-wrap: wrap; background-color: DodgerBlue;}.flex-container > div { background-color: #f1f1f1; width: 45%; margin: 5px; text-align: center; line-height: 75px; font-size: 30px;}}I am using Chart.js to create graphs and using php javascript for data handling.
What am i doing incorrectly?
The html file which is not working is as below
<?php// Database connection detailsrequire_once 'dbconn.php';?><html><head><link rel="stylesheet" type="text/css" href="style.css"><script> function openCity(evt, cityName) { // Declare all variables var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Get all elements with class="tablinks" and remove the class "active" tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // Show the current tab, and add an "active" class to the button that opened the tab document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; }</script></head><h2>Waterfront Trident<br></h2><div class="tab"><button class="tablinks" onclick="openCity(event, 'Monthly')">Current Month</button><button class="tablinks" onclick="openCity(event, 'Historical')">History</button><button class="tablinks" onclick="openCity(event, 'Alarms')">Alarms</button><button class="tablinks" onclick="openCity(event, 'Trends')">Trends</button></div><div id="Trends" class="tabcontent"><div class="flex-container"><div><?php $sql = "SELECT * FROM pilot_efficiency where Sitename = 'Hercules Tower'"; $result = $conn->query($sql); if ($result->num_rows > 0) { echo "<table>"; echo "<tr>"; echo "<th> EFFICIENCY </td>"; echo "<th> PILOT CHILLER </td>"; echo "</tr>"; while ($row = $result->fetch_assoc()) { echo "<tr>"; echo "<td>" . $row['Month'] . "</td>"; echo "<td>" . $row['PilotEffy'] ." KWH/ton</td>"; echo "</tr>"; } echo "</table>"; echo "</td>"; echo "<td>"; echo "<table>"; echo "</table>"; } else { echo "no data to display"; } ?></div><div><script src="https://cdn.jsdelivr.net/npm/chart.js"></script><?php // Database connection details $sql = "SELECT Month, PilotEffy FROM pilot_efficiency where Sitename = 'Hercules Tower'"; $stmt = $conn->prepare($sql); $stmt->execute(); $stmt->bind_result($mth, $piloteffy); $mth_array = Array(); $effy_array = Array(); while($stmt->fetch()) { $mth_array[] = $mth; $effy_array[] = $piloteffy; } $mth_array = json_encode($mth_array); $effy_array = json_encode($effy_array); ?><canvas id="myChart"></canvas><script> var mtharray = <?php echo $mth_array; ?>; var effyarray = <?php echo $effy_array; ?>; if (!Array.isArray(mtharray) || !mtharray.length) { var text = 'array not populated'; document.getElementById('jserror').innerHTML=text; } else { } const ctx = document.getElementById('myChart'); new Chart(ctx, { type: 'bar', data: { labels: mtharray, datasets: [{ label: 'Pilot Efficiency Monthly', data: effyarray, borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } });</script></div><div><?php $sql = "SELECT sum(Cool_Upgr) as Cool_Upgr, sum(Cool_Pilot) as Cool_Pilot, sum(Power_Upgr) as Power_Upgr, sum(Power_Pilot) as Power_Pilot, sum(Power_Pumps) as Power_Pumps FROM gl_caas_mtd where Sitename = 'Hercules Tower'"; $result = $conn->query($sql); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { echo "<table>"; echo "<caption> CUMMULATIVE PLANT SUMMARY</caption>"; echo "<tr>"; echo "<td> Cooling </td>"; echo "<td>" . $row['Cool_Upgr'] + $row['Cool_Pilot'] . " Tons</td>"; echo "<tr>"; echo "<tr>"; echo "<td> Power </td>"; echo "<td>" . $row['Power_Upgr'] + $row['Power_Pilot'] + $row['Power_Pumps'] . " KWh</td>"; echo "<tr>"; echo "<tr>"; echo "<td> Efficiency Gain </td>"; echo "<td>" . round((1 - round(($row['Power_Upgr'] + $row['Power_Pumps'] / 3) / $row['Cool_Upgr'],2) / round(($row['Power_Pilot'] + $row['Power_Pumps'] / 3 * 2) / $row['Cool_Pilot'],2)) * 100, 0) . "%" . "</td>"; echo "<tr>"; echo "</table>"; } } else { echo "No data to display"; } ?></div><div><?php $sql = "SELECT sum(Cool_Upgr) as Cool_Upgr, sum(Cool_Pilot) as Cool_Pilot, sum(Power_Upgr) as Power_Upgr, sum(Power_Pilot) as Power_Pilot, sum(Power_Pumps) as Power_Pumps FROM gl_caas_mtd where Sitename = 'Hercules Tower'"; $result = $conn->query($sql); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { echo "<table>"; echo "<caption> MONTHLY SAVINGS </caption>"; echo "<tr>"; echo "<td>KWh</td>"; echo "<td>" . round((round(($row['Power_Pilot'] + $row['Power_Pumps'] / 3 * 2) / $row['Cool_Pilot'],2) - round(($row['Power_Upgr'] + $row['Power_Pumps'] / 3) / $row['Cool_Upgr'],2)) * $row['Cool_Upgr'], 0) . " KWh</td>"; echo "</tr>"; echo "<tr>"; echo "<td>KWh</td>"; echo "<td>" . round((round(($row['Power_Pilot'] + $row['Power_Pumps'] / 3 * 2) / $row['Cool_Pilot'],2) - round(($row['Power_Upgr'] + $row['Power_Pumps'] / 3) / $row['Cool_Upgr'],2)) * $row['Cool_Upgr'] * 0.47, 0) . " Tons</td>"; echo "</tr>"; echo "<tr>"; echo "<td>KWh</td>"; echo "<td>" . round((round(($row['Power_Pilot'] + $row['Power_Pumps'] / 3 * 2) / $row['Cool_Pilot'],2) - round(($row['Power_Upgr'] + $row['Power_Pumps'] / 3) / $row['Cool_Upgr'],2)) * $row['Cool_Upgr'] * 0.44, 0) . " AED</td>"; echo "</tr>"; echo "</table>"; } } ?></div></div></html>The same code works fine when in a standalone file.
<style>.flex-container { display: flex; flex-wrap: wrap; background-color: DodgerBlue;}.flex-container > div { background-color: #f1f1f1; width: 45%; margin: 5px; text-align: center; line-height: 75px; font-size: 30px;}table { border-collapse: collapse; width: 100%;}th, td { text-align: left; padding: 8px;}tr:nth-child(even) {background-color: #f2f2f2;}</style><html><?php require_once 'dbconn.php'; ?><head></head><div class="flex-container"><div><?php $sql = "SELECT * FROM pilot_efficiency where Sitename = 'Hercules Tower'"; $result = $conn->query($sql); if ($result->num_rows > 0) { echo "<table>"; echo "<tr>"; echo "<th> EFFICIENCY </td>"; echo "<th> PILOT CHILLER </td>"; echo "</tr>"; while ($row = $result->fetch_assoc()) { echo "<tr>"; echo "<td>" . $row['Month'] . "</td>"; echo "<td>" . $row['PilotEffy'] ." KWH/ton</td>"; echo "</tr>"; } echo "</table>"; echo "</td>"; echo "<td>"; echo "<table>"; echo "</table>"; } else { echo "no data to display"; } ?></div><div><script src="https://cdn.jsdelivr.net/npm/chart.js"></script><?php // Database connection details $sql = "SELECT Month, PilotEffy FROM pilot_efficiency where Sitename = 'Hercules Tower'"; $stmt = $conn->prepare($sql); $stmt->execute(); $stmt->bind_result($mth, $piloteffy); $mth_array = Array(); $effy_array = Array(); while($stmt->fetch()) { $mth_array[] = $mth; $effy_array[] = $piloteffy; } $mth_array = json_encode($mth_array); $effy_array = json_encode($effy_array); ?><canvas id="myChart"></canvas><script> var mtharray = <?php echo $mth_array; ?>; var effyarray = <?php echo $effy_array; ?>; if (!Array.isArray(mtharray) || !mtharray.length) { var text = 'array not populated'; document.getElementById('jserror').innerHTML=text; } else { } const ctx = document.getElementById('myChart'); new Chart(ctx, { type: 'bar', data: { labels: mtharray, datasets: [{ label: 'Pilot Efficiency Monthly', data: effyarray, borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } });</script></div><div><?php $sql = "SELECT sum(Cool_Upgr) as Cool_Upgr, sum(Cool_Pilot) as Cool_Pilot, sum(Power_Upgr) as Power_Upgr, sum(Power_Pilot) as Power_Pilot, sum(Power_Pumps) as Power_Pumps FROM gl_caas_mtd where Sitename = 'Hercules Tower'"; $result = $conn->query($sql); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { echo "<table>"; echo "<caption> CUMMULATIVE PLANT SUMMARY</caption>"; echo "<tr>"; echo "<td> Cooling </td>"; echo "<td>" . $row['Cool_Upgr'] + $row['Cool_Pilot'] . " Tons</td>"; echo "<tr>"; echo "<tr>"; echo "<td> Power </td>"; echo "<td>" . $row['Power_Upgr'] + $row['Power_Pilot'] + $row['Power_Pumps'] . " KWh</td>"; echo "<tr>"; echo "<tr>"; echo "<td> Efficiency Gain </td>"; echo "<td>" . round((1 - round(($row['Power_Upgr'] + $row['Power_Pumps'] / 3) / $row['Cool_Upgr'],2) / round(($row['Power_Pilot'] + $row['Power_Pumps'] / 3 * 2) / $row['Cool_Pilot'],2)) * 100, 0) . "%" . "</td>"; echo "<tr>"; echo "</table>"; } } else { echo "No data to display"; } ?></div><div><?php $sql = "SELECT sum(Cool_Upgr) as Cool_Upgr, sum(Cool_Pilot) as Cool_Pilot, sum(Power_Upgr) as Power_Upgr, sum(Power_Pilot) as Power_Pilot, sum(Power_Pumps) as Power_Pumps FROM gl_caas_mtd where Sitename = 'Hercules Tower'"; $result = $conn->query($sql); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { echo "<table>"; echo "<caption> MONTHLY SAVINGS </caption>"; echo "<tr>"; echo "<td>KWh</td>"; echo "<td>" . round((round(($row['Power_Pilot'] + $row['Power_Pumps'] / 3 * 2) / $row['Cool_Pilot'],2) - round(($row['Power_Upgr'] + $row['Power_Pumps'] / 3) / $row['Cool_Upgr'],2)) * $row['Cool_Upgr'], 0) . " KWh</td>"; echo "</tr>"; echo "<tr>"; echo "<td>KWh</td>"; echo "<td>" . round((round(($row['Power_Pilot'] + $row['Power_Pumps'] / 3 * 2) / $row['Cool_Pilot'],2) - round(($row['Power_Upgr'] + $row['Power_Pumps'] / 3) / $row['Cool_Upgr'],2)) * $row['Cool_Upgr'] * 0.47, 0) . " Tons</td>"; echo "</tr>"; echo "<tr>"; echo "<td>KWh</td>"; echo "<td>" . round((round(($row['Power_Pilot'] + $row['Power_Pumps'] / 3 * 2) / $row['Cool_Pilot'],2) - round(($row['Power_Upgr'] + $row['Power_Pumps'] / 3) / $row['Cool_Upgr'],2)) * $row['Cool_Upgr'] * 0.44, 0) . " AED</td>"; echo "</tr>"; echo "</table>"; } } ?></div></div></html>resulting in a great layout like