CODEWITHSUNDEEP
htmlcssresponsive-design
Joost
Joost

Reputation: 94

div not taking full width of screen on mobile, when there's a wide table underneath

Having read a lot of other posts for 'div not taking full width', I still can't find an answer as to why the following happens with my website:

I have a responsive topnav navigation bar that works perfectly in Chrome on a Win11 machine. On an Android mobile however, the topnav only takes the full width of the browser when the table is less 'narrow'. It seems that when the table becomes wider, the topnav doesn't follow suit.

HTML + PHP:

<?php
// Include the database connection file
include_once("config.php");

$usr = $_GET['usr'];

// Fetch measurements (in descending order)
$result = mysqli_query($mysqli, "SELECT * FROM ".$usr." ORDER BY ts DESC");
?>
<!DOCTYPE html>
<html lang="nl">
<head>
    <title>MariaDB Bloeddruk</title>
    <link rel="stylesheet" href="../styles.css">
</head>
<body>

<div class="topnav" id="myTopNav">
    <?php include("../header.php") ?>
</div>

<div>
    <table>
        <thead>
            <tr>
                <th>Datum</th>
                <th>Tijd</th>
                <th>Bovendruk</th>
                <th>Onderdruk</th>
                <th>Hoge Bloeddruk</th>
                <th>Hartslag</th>
                <th>Onregelmatige Hartslag</th>
                <th>AF Modus</th>
                <th>AF gedetecteerd</th>
                <th>Manchet OK</th>
                <th><a class="button" href="add.php?usr=<?php echo $usr ?>">Nieuwe meting</a></th>
            </tr>
        </thead>
        <tbody>
            <?php
            // Print measurements
            while($res = mysqli_fetch_array($result)) {
                echo "<tr>";
                $dt = substr($res['ts'],0,10);
                $tm = substr($res['ts'],-8,8);
                echo "<td>".$dt."</td>";
                echo "<td>".$tm."</td>";
                echo "<td>".$res['sys_bp']."</td>";
                echo "<td>".$res['dia_bp']."</td>";
                echo "<td><input ".($res['high_bp'] == 1 ? "checked" : "")." type='checkbox' onclick='return false;'</td>";
                echo "<td>".$res['hr']."</td>";
                echo "<td>".($res['irregular_rythm'] == '' ? "</td>" : "<input ".($res['irregular_rythm'] == 1 ? "checked" : "")." type='checkbox' onclick='return false;'</td>");
                echo "<td><input ".($res['af_mode'] == 1 ? "checked" : "")." type='checkbox' onclick='return false;'</td>";
                echo "<td>".($res['af_detected'] == '' ? "</td>" : "<input ".($res['af_detected'] == 1 ? "checked" : "")." type='checkbox' onclick='return false;'</td>");
                echo "<td><input ".($res['cuff_ok'] == 1 ? "checked" : "")." type='checkbox' onclick='return false;'</td>";
                echo "<td><a href=\"edit.php?usr=".$usr."&ts=$res[ts]\">Bewerken</a> | <a href=\"delete.php?usr=".$usr."&ts=$res[ts]\" onClick=\"return confirm('Weet u zeker dat u deze meting wilt verwijderen?')\">Verwijderen</a></td>";
            }
            ?>
        </tbody>
    </table>
</div>
</body>
</html>

rendered HTML/code snippet:

body {
        font-family: Verdana, Tahoma, sans-serif;
        font-size: calc(16px + 0.25vw);
}

.topnav {
  overflow: hidden;
  background-color: #a6e1fa;
    margin-bottom: 20px;
    position: sticky;
    top: 0;
}

.topnav a {
  float: left;
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav a:hover {
  background-color: #bbb;
  color: black;
}

.topnav a.active {
  background-color: #001c55;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

a {
    color: #0a2472;
    text-decoration: none;
    padding: 6px;
}

table {
    border-collapse: collapse;
    border: 1px solid #0e6ba8;
    margin-left: auto;
    margin-right: auto;
}

table th {
    background-color: #0e6ba8;
    color: #fff;
    font-weight: bold;
        padding: 18px 12px;
        position: sticky;
        top: 0;
}

table tr:nth-child(even) {
        background-color: #caf0f8;
}

table tr {
    border-bottom: 1px dotted #0e6ba8;
}

table td {
    padding: 12px;
        text-align: center;
}

table td:first-child {
        white-space: nowrap;
}

form table {
    width: 33%;
}

form table tr:nth-child(even) {
        background-color: #fff;
}

form table tfoot {
    background-color: #0e6ba8;
}

form table td:first-child {
        white-space: normal;
}

.button {
    border: 1px solid #001c55;
        border-radius: 10px;
    background-color: #001c55;
    color: #fff;
    text-decoration: none;
    padding: 6px;
    min-width: 100px;
        white-space: nowrap;
}

.button:hover {
    background-color: #fff;
    color: #001c55;
    cursor: pointer;
}

input {
        font-size: inherit;
}

input[type=number] {
        width: calc(4 * (16px + 0.25vw));
        text-align: center;
}

input[type=checkbox] {
        width: calc(16px + 0.25vw);
        height: calc(16px + 0.25vw);
}

input[type=checkbox]:checked {
        accent-color: #0a2472;
        background-color: #000;
}

input[type=submit] {
    border: 1px solid #001c55;
    border-radius: 10px;
    background-color: #001c55;
    color: #fff;
    text-decoration: none;
    padding: 10px;
    min-width: 100px;
}

input[type=submit]:hover {
    background-color: #fff;
    color: #001c55;
    cursor: pointer;
}

input[type=submit].cancel {
    background-color: #bbb;
    background-color: #bbb;
    border: 1px solid #bbb;
}

input[type=submit].cancel:hover {
    background-color: #fff;
    color: #bbb;
    cursor: pointer;
}

.float-right {
    float: right;
}

.error { 
    color: red;
    font-size: 12px;
}
<html lang="nl"><head>
    <title>MariaDB Bloeddruk</title>
    <link rel="stylesheet" href="../styles.css">
</head>
<body>

<div class="topnav" id="myTopNav">
    <a href="../">Home</a><a href="/bloeddruk/index.php?usr=joost" class="active">Bloeddruk - Joost</a><a href="/vijver/">Vijverwater</a><a href="/water/">Watermeter</a><a href="/lekkage/">Waterlekkage</a><a href="javascript:void(0)" class="icon" onclick="topNavStyle()"> <i class="fa fa-bars"></i></a></div>

<div>
    <table>
        <thead>
            <tr>
                <th>Datum</th>
                <th>Tijd</th>
                <th>Bovendruk</th>
                <th>Onderdruk</th>
                <th>Hoge Bloeddruk</th>
                <th>Hartslag</th>
                <th>Onregelmatige Hartslag</th>
                <th>AF Modus</th>
                <th>AF gedetecteerd</th>
                <th>Manchet OK</th>
                <th><a class="button" href="add.php?usr=joost">Nieuwe meting</a></th>
            </tr>
        </thead>
        <tbody>
            <tr><td>2022-10-29</td><td>09:23:00</td><td>140</td><td>80</td><td><input checked="" type="checkbox" onclick="return false;" <="" td=""></td><td>50</td><td></td><td><input type="checkbox" onclick="return false;" <="" td=""></td><td></td><td><input type="checkbox" onclick="return false;" <="" td=""></td><td><a href="edit.php?usr=joost&amp;ts=2022-10-29 09:23:00">Bewerken</a> | <a href="delete.php?usr=joost&amp;ts=2022-10-29 09:23:00" onclick="return confirm('Weet u zeker dat u deze meting wilt verwijderen?')">Verwijderen</a></td></tr></tbody>
    </table>
</div>

</body></html>

Upvotes: 0

Views: 46

Answers (1)

Joost
Joost

Reputation: 94

Got it solved by adding max height/width and auto overflow to the div containing the table:

CSS added:

.tableContainer {
        max-width: 100vw;
        max-height: 100vh;
        overflow:auto;
}

And of course classified the div that wraps the table as "tableContainer":

<div class="tableContainer">
    <table>
        <thead>
            <tr>
                <th>Datum</th>
...

Upvotes: 1

Related Questions