Bonjour,

Voila je rencontre un petit problème avec mon code et/ou ma vue.

Comme on peut le voir, sur la partie droite, ma div ne descend pas comme il le faudrait.
J'ai beau vérifié mon code, je ne vois pas d'où vient le problème.
Mes ouvertures de div ont bien une fermeture correspondante.

Voici le code complet de la page :

<?php
// Connexion à la table
$recetteTable = App::getInstance()->getTable('Recette');
if (!empty($_POST)) {
    // INSERT des données saisies
    $result = $recetteTable->create([
        'categories_id' => $_POST['categories_id'],
        'recettes' => $_POST['recettes'],
        'nbpersonnes' => $_POST['nbpersonnes'],
        'marge' => $_POST['marge'],
        'observations' => $_POST['observations']
    ]);
    // On récupère l'id de la recette
    $recette_id = App::getInstance()->getDb()->lastInsertId();
    // Connexion à la table de liaison
    $compositionTable = App::getInstance()->getTable('CompositionRecette');
    $id_composition = [];
    // INSERT des ingrédients et des quantités dans la table de liaison
    foreach ($_POST['ingredients_id'] as $key => $ingredient_id) {
        $quantite = $_POST['quantite'][$key];
        $compositionTable->create([
            'recettes_id' => $recette_id,
            'ingredients_id' => $ingredient_id,
            'quantites' => $quantite
        ]);

        $id_composition[] = App::getInstance()->getDb()->lastInsertId();
    }

    if ($recette_id && count($id_composition)) {
      // Redirection et/ou Message
      header('Location: index.php?p=recette.add');
    }
}
// Connexion aux tables pour remplir les SELECT
$categories = App::getInstance()->getTable('Categorie')->extract('id', 'categories');
$ingredients = App::getInstance()->getTable('Ingredient')->extract('id', 'ingredients');
// On charge les paramètres du formulaire
$form = new \Core\HTML\BootstrapForm($_POST);

?>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->

      <ol class="breadcrumb pull-right">
        <li><a href="index.php?p=home">Home</a></li>
        <li class="active"><a href="index.php?p=recettes">Recettes</a></li>
        <li class="active">Ajouter</li>
      </ol>

    <!-- Main content -->
    <section class="content">

    <div class="row"> 

      <form method="POST"> 

        <div class="col-md-6">

          <div class="box box-danger">
            <div class="box-header">
              <h4 class="box-title">Création de la recette</h4>
            </div>
            <div class="box-body">

              <!-- Catégories -->
              <?= $form->select('categories_id', 'Catégorie', $categories); ?>
              <!-- /.form group -->

              <!-- Nom de la recette -->
              <?= $form->input('recettes', 'Choisir le nom de la recette'); ?>
              <!-- /.form group -->

              <!-- Nombre de personnes -->
              <?= $form->input('nbpersonnes', 'Nombre de personnes'); ?>
              <!-- /.form group -->

              <!-- Marge -->
              <?= $form->input('marge', 'Marge'); ?>
              <!-- /.form group -->

              <!-- Observation -->
              <?= $form->input('observations', 'Observations', ['type'=>'textarea']); ?>
              <!-- /.form group -->

              <button id="add" class="btn btn-block submit">Valider</button>
            </div>
            <!-- /.box-body --> 
          </div>
          <!-- /.box -->
        </div>

        <div class="col-md-6">

          <div class="box box-danger">
            <div class="box-header">
              <h4 class="box-title">Sélectionner les ingrédients</h4>
            </div>
            <div class="box-body">
            <div data-role="dynamic-fields">
              <div class="inline">
                <div class=" col-md-7">
                  <!-- Ingrédient -->
                  <?= $form->select('ingredients_id[]', 'Ingrédient', $ingredients); ?>
                  <!-- /.form group -->
                </div>

                <div class="col-md-3">
                  <!-- Quantités -->
                  <?= $form->input('quantite[]', 'Quantité'); ?>
                  <!-- /.form group -->
                </div>

                <div class="col-md-2">
                  <label>Action</label>
                  <button class="btn btn-default remove" data-role="remove"> <span class="glyphicon glyphicon-remove"></span></button>
                  <button class="btn btn-default" data-role="add"> <span class="glyphicon glyphicon-plus"></span></button>
                </div>
              </div>
            </div>
            </div>
            <!-- /.box-body --> 
          </div>
          <!-- /.box -->
        </div>

      </form>
      <!-- /.form -->

    </div>
    <!-- /.row -->

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

Merci pour votre analyse et votre aide.

3 réponses


Benjamin Derepas
Réponse acceptée

A première vue je dirai que tu as un float quelques part sans clearfix .

Zulkar
Auteur

J'ai repris mon CSS pour les classes box, box box-danger, box-header, box-body ... et je ne vois pas de Float.
J'ai recopié le même bloc, qui pose problème, à partir de la div class="col-md-6" dans un autre projet et je n'ai pas ce problème.

Zulkar
Auteur

J'ai modifié en ajoutant la classe clearfix à cet endroit :

<div class="box-body clearfix">

Et tout fonctionne à nouveau.

Merci pour la piste et la résolution du problème.
Merci !!!