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