[Résolu] Hauteur de div - Flexbox - Bootstrap collapse par bibiroro939 - page 1

Bonsoir à tous,
J'essaye de générer une carte de restauration par php et j'utilise les flexbox ainsi qu'un système de collapse pour chaque produit.
Petit problème lorsque je clique sur modifier sur un des produit, les options déroulantes s'affichent bien, augmente donc la hauteur du bloc du produit concerné, mais aussi la hauteur des autres bloc voisins qui ne sont pas concernés !
si quelqu'un aurait une solution à mon problème, je lui serai extrêmement reconnaissant :ange:
Merci d'avance !
Voici le code source Html généré avec les cdn bootstrap.. si vous le testez sur votre navigateur l affichage sera moche, mais pourrez constater le problème par vous même:
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>

<div style="display: flex; flex-wrap: wrap; justify-content: center;">

    <div style="margin: 1% 0.5% 0.5%;border: 1px solid lightgrey;border-top-left-radius: 5px;border-top-right-radius: 5px; width:32%; min-width: 300px;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);transition: box-shadow 0.15s ease-in-out;"
         id="17"><img style="width: 100%; max-height: 40%; border-top-left-radius: 5px;border-top-right-radius: 5px;"
                      src="../../img/test/burger.jpg" alt="tacosXL">
        <div style="padding: 3%;">
            <h3 style="color: black;"> Cheeseburger<span style="float: right;">9.99€</span></h3>
            <a data-toggle="collapse" aria-expanded="false" href="#collapse_5ba56fdc66553">Modifier </a>
            <div id="collapse_5ba56fdc66553" class="panel-collapse collapse">
                <ul id="nbringredient" class="list-group" data-nbr="3"><a class="list-group-item list-group-item-action"
                                                                          onclick="rayer('5ba56fdc66553_0')"><p
                        id="nm_ingredient_5ba56fdc66553_0" data-nomingredient="Steak" data-status="1"
                        data-inalienable="1">Steak</p></a><a class="list-group-item list-group-item-action"
                                                             onclick="rayer('5ba56fdc66553_1')"><p
                        id="nm_ingredient_5ba56fdc66553_1" data-nomingredient="Salade" data-status="1"
                        data-inalienable="0">Salade<i id="i_5ba56fdc66553_1" style="float: right;margin-top: 3%;"
                                                      class="fas fa-check-circle text-success" data-status="1"
                                                      data-inalienale="0"></i></p></a><a
                        class="list-group-item list-group-item-action" onclick="rayer('5ba56fdc66553_2')"><p
                        id="nm_ingredient_5ba56fdc66553_2" data-nomingredient="Oignons" data-status="1"
                        data-inalienable="0">Oignons<i id="i_5ba56fdc66553_2" style="float: right;margin-top: 3%;"
                                                       class="fas fa-check-circle text-success" data-status="1"
                                                       data-inalienale="0"></i></p></a></ul>
                <label>Un ou plusieurs supplément(s) ?</label>
                <div class="btn-group bootstrap-select show-tick supplements_5ba56fdc66553" style="width: 100%;">
                    <button type="button" class="btn dropdown-toggle bs-placeholder btn-default" data-toggle="dropdown"
                            role="button" title="Sélectionner parmi les suppléments"><span
                            class="filter-option pull-left">Sélectionner parmi les suppléments</span>&nbsp;<span
                            class="bs-caret"><span class="caret"></span></span></button>
                    <div class="dropdown-menu open" role="combobox">
                        <ul class="dropdown-menu inner" role="listbox" aria-expanded="false">
                            <li class="dropdown-header " data-optgroup="1"><span
                                    class="text">Ingrédient de votre Burger</span></li>
                            <li data-original-index="0" data-optgroup="1"><a tabindex="0" class="opt  "
                                                                             data-tokens="null" role="option"
                                                                             aria-disabled="false"
                                                                             aria-selected="false"><span class="text"> Steak<small
                                    class="text-muted">+1.00€</small></span><span
                                    class="glyphicon glyphicon-ok check-mark"></span></a></li>
                            <li data-original-index="1" data-optgroup="1"><a tabindex="0" class="opt  "
                                                                             data-tokens="null" role="option"
                                                                             aria-disabled="false"
                                                                             aria-selected="false"><span class="text"> Oignons<small
                                    class="text-muted">+0.50€</small></span><span
                                    class="glyphicon glyphicon-ok check-mark"></span></a></li>
                            <li data-original-index="2" data-optgroup="1"><a tabindex="0" class="opt  "
                                                                             data-tokens="null" role="option"
                                                                             aria-disabled="false"
                                                                             aria-selected="false"><span class="text"> Poivrons<small
                                    class="text-muted">+0.50€</small></span><span
                                    class="glyphicon glyphicon-ok check-mark"></span></a></li>
                            <li data-original-index="3" data-optgroup="1"><a tabindex="0" class="opt  "
                                                                             data-tokens="null" role="option"
                                                                             aria-disabled="false"
                                                                             aria-selected="false"><span class="text"> Piments<small
                                    class="text-muted">+0.50€</small></span><span
                                    class="glyphicon glyphicon-ok check-mark"></span></a></li>
                            <li data-original-index="4" data-optgroup="1"><a tabindex="0" class="opt  "
                                                                             data-tokens="null" role="option"
                                                                             aria-disabled="false"
                                                                             aria-selected="false"><span class="text"> Salade<small
                                    class="text-muted">+0.00€</small></span><span
                                    class="glyphicon glyphicon-ok check-mark"></span></a></li>
                        </ul>
                    </div>
                    </div>
            </div><!-- end Div collapse -->
            <button type="button" style="margin-top: 3%;margin-bottom: 0.5%;"
                    onclick="addPanierNonModulable(17, 'Cheeseburger', '5ba56fdc66553', '1', '0/23-0/22-1/21', '10', 9.99)"
                    class="btn btn-danger center-block">Ajouter au panier
            </button>
        </div>
        <img style="width: 100%; max-height: 40%; border-top-left-radius: 5px;border-top-right-radius: 5px;"
             src="../../img/test/burger.jpg" alt="tacosXL">
        <div style="padding: 3%;">
            <h3 style="color: black;"> Cheeseburger<span style="float: right;">9.99€</span></h3>
            <a data-toggle="collapse" aria-expanded="false" href="#collapse_5ba56fdc66c33">Modifier </a>
            <div id="collapse_5ba56fdc66c33" class="panel-collapse collapse">
                <ul id="nbringredient" class="list-group" data-nbr="3"><a class="list-group-item list-group-item-action"
                                                                          onclick="rayer('5ba56fdc66c33_0')"><p
                        id="nm_ingredient_5ba56fdc66c33_0" data-nomingredient="Steak" data-status="1"
                        data-inalienable="1">Steak</p></a><a class="list-group-item list-group-item-action"
                                                             onclick="rayer('5ba56fdc66c33_1')"><p
                        id="nm_ingredient_5ba56fdc66c33_1" data-nomingredient="Salade" data-status="1"
                        data-inalienable="0">Salade<i id="i_5ba56fdc66c33_1" style="float: right;margin-top: 3%;"
                                                      class="fas fa-check-circle text-success" data-status="1"
                                                      data-inalienale="0"></i></p></a><a
                        class="list-group-item list-group-item-action" onclick="rayer('5ba56fdc66c33_2')"><p
                        id="nm_ingredient_5ba56fdc66c33_2" data-nomingredient="Oignons" data-status="1"
                        data-inalienable="0">Oignons<i id="i_5ba56fdc66c33_2" style="float: right;margin-top: 3%;"
                                                       class="fas fa-check-circle text-success" data-status="1"
                                                       data-inalienale="0"></i></p></a></ul>
                <label>Un ou plusieurs supplément(s) ?</label>
                <div class="btn-group bootstrap-select show-tick supplements_5ba56fdc66c33" style="width: 100%;">
                    <button type="button" class="btn dropdown-toggle bs-placeholder btn-default" data-toggle="dropdown"
                            role="button" title="Sélectionner parmi les suppléments"><span
                            class="filter-option pull-left">Sélectionner parmi les suppléments</span>&nbsp;<span
                            class="bs-caret"><span class="caret"></span></span></button>
                    <div class="dropdown-menu open" role="combobox">
                        <ul class="dropdown-menu inner" role="listbox" aria-expanded="false">
                            <li class="dropdown-header " data-optgroup="1"><span
                                    class="text">Ingrédient de votre Burger</span></li>
                            <li data-original-index="0" data-optgroup="1"><a tabindex="0" class="opt  "
                                                                             data-tokens="null" role="option"
                                                                             aria-disabled="false"
                                                                             aria-selected="false"><span class="text"> Steak<small
                                    class="text-muted">+1.00€</small></span><span
                                    class="glyphicon glyphicon-ok check-mark"></span></a></li>
                            <li data-original-index="1" data-optgroup="1"><a tabindex="0" class="opt  "
                                                                             data-tokens="null" role="option"
                                                                             aria-disabled="false"
                                                                             aria-selected="false"><span class="text"> Oignons<small
                                    class="text-muted">+0.50€</small></span><span
                                    class="glyphicon glyphicon-ok check-mark"></span></a></li>
                            <li data-original-index="2" data-optgroup="1"><a tabindex="0" class="opt  "
                                                                             data-tokens="null" role="option"
                                                                             aria-disabled="false"
                                                                             aria-selected="false"><span class="text"> Poivrons<small
                                    class="text-muted">+0.50€</small></span><span
                                    class="glyphicon glyphicon-ok check-mark"></span></a></li>
                            <li data-original-index="3" data-optgroup="1"><a tabindex="0" class="opt  "
                                                                             data-tokens="null" role="option"
                                                                             aria-disabled="false"
                                                                             aria-selected="false"><span class="text"> Piments<small
                                    class="text-muted">+0.50€</small></span><span
                                    class="glyphicon glyphicon-ok check-mark"></span></a></li>
                            <li data-original-index="4" data-optgroup="1"><a tabindex="0" class="opt  "
                                                                             data-tokens="null" role="option"
                                                                             aria-disabled="false"
                                                                             aria-selected="false"><span class="text"> Salade<small
                                    class="text-muted">+0.00€</small></span><span
                                    class="glyphicon glyphicon-ok check-mark"></span></a></li>
                        </ul>
                    </div>
                    </div>
            </div><!-- end Div collapse -->
            <button type="button" style="margin-top: 3%;margin-bottom: 0.5%;"
                    onclick="addPanierNonModulable(17, 'Cheeseburger', '5ba56fdc66c33', '1', '0/23-0/22-1/21', '10', 9.99)"
                    class="btn btn-danger center-block">Ajouter au panier
            </button>
        </div>
    </div>
    <div style="margin: 1% 0.5% 0.5%;border: 1px solid lightgrey;border-top-left-radius: 5px;border-top-right-radius: 5px; width:32%; min-width: 300px;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);transition: box-shadow 0.15s ease-in-out;" id="18"><img style="width: 100%; max-height: 40%; border-top-left-radius: 5px;border-top-right-radius: 5px;" src="../../img/test/burger.jpg" alt="tacosXL"><div style="padding: 3%;">
        <h3 style="color: black;"> Fanta<span style="float: right;">1.00€</span></h3>
    </div><!-- end Div collapse --><button type="button" style="margin-top: 3%;margin-bottom: 0.5%;" onclick="addPanierNonModulable(18, 'Fanta', '5ba56fdc67228', '', '', '', 1)" class="btn btn-danger center-block">Ajouter au panier</button></div></div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Hauteur de div - Flexbox - Bootstrap collapse

Supprimer

Modérer

Signaler le message aux modérateurs
