0

La primera parte corresponde al código js donde llamo a un archivo que ejecuta el ciclo for, pero no me da los satos de línea, poniendo todo en una columna.

<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>

En esta segunda parte esta el código HTML dentro del ciclo For:

<?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>";
?>

Asi como esta el código imprime todo en una sola columna, un div sobre el otro. Lo que quiero es que como dice la condición if al final, es que muestre un div al lado del otro y cuando ya se hayan mostrado tres (columnas), se haga el salto de línea, y esto reiterativamente hasta que se impriman todos los datos obtenidos de la BD.

Agradezco de antemano cualquier solución para este problema. Actualmente se ve asi:

introducir la descripción de la imagen aquí Quiero que se vea asi: introducir la descripción de la imagen aquí

6
  • Todo eso lo estás metiendo en un <table>?
    – Sr1871
    Commented el 11 oct. 2018 a las 15:23
  • Si el table esta, en el lado del cliente donde esta el js, ¿quito el table? Commented el 11 oct. 2018 a las 15:27
  • Ya quite el table, pero aun asi se ve en línea. No me esta tomando el contador o no se D: Commented el 11 oct. 2018 a las 15:29
  • No lo quites, solo era pregunta, regrésalo como estaba, y de preferencia pon en el código desde el table
    – Sr1871
    Commented el 11 oct. 2018 a las 15:36
  • En el atributo style del div card, añade la propiedad display: inline-block, de tal modo que te quedaría así style="width: 20rem; display: inline-block;" Commented el 20 dic. 2019 a las 18:57

4 respuestas 4

0

Podés usar CSS para cambiar las propiedades de los elementos de tu página. Para alinear los objetos, podés usar display: inline-block; en los objetos .card-body, o bien podés usar flex box para alinear los items. Algo así:

* { 
  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>

4
  • Gracias por responder, pero mira la imagen que tome del problema. Trate de aplicar lo que me dices pero igual se ponen todos como esta en la imagen. Commented el 11 oct. 2018 a las 15:00
  • Eso es porque en el elemento card tenés un width específico (20rem). Si quitás ese atributo, los elementos se van a desplegar a lo largo.
    – Niche
    Commented el 11 oct. 2018 a las 15:02
  • Hice lo del width, pero no funciona me muestra el card largo (de lado a lado), quiero que se vea como en la segunda imagen que subi. Commented el 11 oct. 2018 a las 15:09
  • Te sugiero usar las herramientas de desarrollador (F12) para ver cuál es el elemento que contiene el div .card que lo está forzando a tener ese ancho. Se me ocurre que debe ser el <td>
    – Niche
    Commented el 11 oct. 2018 a las 15:14
0

puedes hacerlo asi:

echo "<div class='card'>";

for( $i=0; $i < 10; $i++){
    // si no es 0 ... en la primera interacion $i es 0 por lo que 0%3=0;
    if($i !=0 && ($i %3 ==0)) echo "</div><div class='card'>";
          
      echo' <div class="card-body">
            <p class="card-text">Texto '.$i.'</p>
            <input type="checkbox">
        </div>';
}

echo "</div class='enbody'>";
0

No es recomendable que ejecutes scriptings dentro del mismo PHP, por eso están las nomenclaturas del lado del servidor(para PHP en este caso) y del lado del cliente (para JavaScript).

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

Este código de arriba, de seguro no se ejecuta, de ahí puedes partir al error. Otra cosa que te recomiendo es que aprendas a usar la pestaña Sources (en Google Chrome) o Depurador (en Firefox), para que hagas breakpoints del script que se ejecuta dentro de tu misma página, esto te ayudará a probar mejor las cosas con el Developers Tools.

Para abrir el Developer Tools, sólo debes precionar: CTRL + SHIFT + I.

Espero haberte ayudado. Bendiciones

-1

Haces los 3 divs con display flex y los tamaños que creas, y cuando el valor del bucle en módulo 3 sea 0, metes un:

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

y repites el proceso.

1
  • Gracias por responder, pero mira la imagen que tome del problema. Trate de aplicar lo que me dices pero me repite tres veces el texto e igual se ponen todos como esta en la imagen. Commented el 11 oct. 2018 a las 15:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.