Elements become invisible on reload, then get visible again on resize

I’m working on a website and hit my head with some basic display problem.

I want to use a php variable that holds a value from the database which represents the src attribute of an img tag. I do this in 2 different places, once in the navbar (where it works perfectly fine) and once inside another div, which causes a big portion of the page (along with the image container) to become blank when the page is reloaded. It works fine if I resize the window or open the Dev Tools.

This is the code that I use for displaying the image in both places:

$sql = "SELECT * FROM users WHERE user_index=?;";
        $stmt = mysqli_stmt_init($conn);
        if (!mysqli_stmt_prepare($stmt, $sql)) {
            echo $_SESSION['dbError'];
        } else {
            mysqli_stmt_bind_param($stmt, "i", $index);
            mysqli_stmt_execute($stmt);
            $result = mysqli_stmt_get_result($stmt);
            $resultCheck = mysqli_num_rows($result);

            if ($resultCheck > 0) {
                while ($row = mysqli_fetch_assoc($result)) {
                    $responsible = $row;
                }
            } else {
                echo $_SESSION['dbError'];
            }
          mysqli_stmt_close($stmt);
       }

if ($responsible['avatar'] == 'noAvatar') {
            echo '<i class="material-icons">person</i>';
        } else {
            echo '<img src="images/icons/' . $responsible['avatar'] . '">';
        }

$responsible is the row from the database that contains the column avatar with the value [someName.extension] e.g. “koala.png”.

If I replace the img element with some random string, everything works fine, that’s how I found out where the problem may be:

if ($responsible['avatar'] == 'noAvatar') {
            echo '<i class="material-icons">person</i>';
        } else {
            echo 'This displays fine';
        }

Here are some pictures that can exemplify the issue better:

picture displayed as wanted (inside the navbar)

blank element after reloading the page

Everything displayed fine after window resize

Thank you!

Answer

I found the problem – Materialize CSS. It was not that I tried to get the image source from the database as I thought, but because I was trying to add an image inside the content of Materialize CSS tabs component.

Apparently, Materialize tabs are based on the CSS carousel, which, in some cases has the height set to a certain amount by the style attribute of the element.

The issue was in the div with the class “tabs-content” which was automatically created by the Materialize tabs and had a fixed height of 400px normally, and 30px when an image is inside that div.

Here is the code that I added to my styles.css file in order to fix it and set its height big enough in order to fit all the content:

.tabs-content.carousel.carousel-slider .carousel-item.active {
  position: relative;
}

.tabs-content {
  height: auto !important;
  min-height: 100%;
}

I hope this helps if anyone else has or will have the same problem.