phphtmlstyling

How to stylize data from mysql in php file correctly?


I am working on a project using php and mysql.

I'm currently displaying data from a table, but I would like to stylize it. I have difficulties doing so.

In the following code, at the end; the part for test is displaying how I want. But in the part where data are display, everything is on the same column. But I would like a result similar to the part test, were the columns are adjusting how many they are on a line depending of the size of screen thank to flexbox.

I guessing it's because I'm trying to stylize it in a while.

But I don't know how to to otherwise... Can someone got any ideas ?

//Part display data
while ($rows = $result-> fetch_assoc()) {
    ?>
    <div class="containerAdmin" style="display:flex; flex-wrap:wrap">
        <div class="box4test">
            <p>test</p>
            <h3><?php echo $rows['nom'];?></h3>
            <?php echo " | category: ";?>
            <?php echo $rows['category'];?>
            <button> x </button>
        </div>
    </div>
    <?php
}
?>
<!-- Part test for the display-->
<div class="containerAdmin" style="display:flex; flex-wrap:wrap">
    <div class="box4test">
        <p>1 </p>            
    </div>
    <div class="box4test">
        <p>2 </p>            
    </div>
    <div class="box4test">
        <p>3 </p>            
    </div>
    <div class="box4test">
        <p>4</p>            
    </div>
</div>

Here is the code for class box4test, in un .css file:

/*.containerAdmin{
    display: flex;
    flex-wrap: wrap;
}*/
.box4test {
    background-color: plum;
    margin: 10px;
    width: 300px;
    height: 50%;
}

Solution

  • you just add your loop inside containerAdmin div. please check below code.

    <div class="containerAdmin" style="display:flex; flex-wrap:wrap">
    <?php while ($rows = $result-> fetch_assoc()) { ?>
        <div class="box4test">
            <p>test</p>
            <h3><?php echo $rows['nom'];?></h3>
            <?php echo " | categorie: ";?>
            <?php echo $rows['categorie'];?>
            <button> x </button>
        </div>
    <?php } ?>
    </div>