flex 容器在选项卡内容页面中不起作用

问题描述 投票：0回答：1

我正在使用选项卡和选项卡内容的样式元素创建一个带有选项卡的网站。

在其中一个选项卡内容中，我想使用弹性容器来控制各种元素的显示 - 表格、图表和文本。

在没有选项卡的独立页面上，它工作正常，但是当我尝试在选项卡内容的主页中使用它时，它会将 div 堆叠在一起。

我的style.css文件如下：

// 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;
}


}

我使用 Chart.js 创建图表并使用 php javascript 进行数据处理。

我做错了什么？

不工作的html文件如下

<?php
// Database connection details
require_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>

相同的代码在独立文件中运行良好。

<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>

产生一个很棒的布局，比如 image of the desired layout

html css flexbox
1个回答
0
投票

将弹性容器放在选项卡后面后就可以工作了。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.