Make a line break in HTML within the For PHP cycle

Navigation
0

The first part corresponds to the js code where I call a file that executes the for cycle, but it does not give me the line saturations, putting everything in a column. 

<script>
$(document).ready(function() {
$("#nivel-especialidad").change(function() {
    $("#nivel-especialidad option:selected").each(function() {
        Id = $(this).val();
        $.post("../Sql/ArregloRequisitos.php", {Id: Id
            }, function(data){
                $("#requisitos-nivel").html(data);
            });
        });
    })
});
</script>

In this second part is the HTML code within the For cycle: 

<?php
$conexion = new PDO("mysql:host=localhost;dbname=scouts_601_palmira","root","");

$Id_nivel = $_POST['Id'];

echo '<script type="text/javascript">alert("'.$Id_nivel.'");</script>';

$sql3 = "SELECT Id, Texto FROM Requisitos WHERE Id_nivel =".$Id_nivel."";
$sentencia3 = $conexion -> prepare($sql3);
$sentencia3 -> execute();
$requisitos = $sentencia3 -> fetchAll();

echo "<tr>";
for ($i = 0, $contador=1; $i < count($requisitos); $i++, $contador++) {?>
    <td>
    <div class="card" style="width: 20rem;">
            <!--<img class="card-img-top" src="..." alt="Card image cap">-->
            <div class="card-body">
                <p class="card-text"><?php
                echo $requisitos[$i]['Texto'];
                ?></p>
                <input type="checkbox">
            </div>
        </div>
    </td>
    <?php if(($contador%3) == 0) {
        echo "</tr><tr>";
    }
}
echo "</tr>";
?>

Just as this code prints everything in a single column, one div on the other. What I want is that as it says the if condition at the end, is that it shows a div side by side and when three (columns) have already been shown, the line break is done, and this repeatedly until all the data is printed obtained from the BD.

I thank you in advance for any solution to this problem. Currently it looks like this:

I want it to look like this:

    
asked by Danyel Melendez Ramirez 11.10.2018 в 16:24
source

2 answers

0

You do the 3 divs with flex display and the sizes that you create, and when the value of the loop in module 3 is 0, you put one: 

<?php
  echo "<br>";
?>

and repeat the process.

    
answered by 11.10.2018 в 16:38
0

You can use CSS to change the properties of the elements of your page. To align the objects, you can use display: inline-block; in the objects .card-body , or you can use flex box to align the items. Something like this: 

* { 
  box-sizing: border-box;
}

.card {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
}

.card-body {
    width: 20%;
    height: 100px;
    background-color: #f0f0f0;
    border: 1px solid #efefef;
    border-radius: 3px;
    box-shadow: 0px 0px 2px 0px #efefef;
    margin: 5px;
    padding: 10px;
}
<div class="card">
    <!--<img class="card-img-top" src="..." alt="Card image cap">-->
    <div class="card-body">
        <p class="card-text">Texto 1</p>
        <input type="checkbox">
    </div>
    <div class="card-body">
        <p class="card-text">Texto 2</p>
        <input type="checkbox">
    </div>
    <div class="card-body">
        <p class="card-text">Texto 3</p>
        <input type="checkbox">
    </div>
    <div class="card-body">
        <p class="card-text">Texto 4</p>
        <input type="checkbox">
    </div>
</div>
    
answered by 11.10.2018 в 16:44
Problem with the use of symfony path in jquery ajax call Refresh in multiselect