There is a flex div having flex-wrap as wrap :
<code>...
callAPI("/activites/prestationsFromGroupes", "POST", JSON.stringify(groupes)).then(prestationsGroupes => {
let htmlPrestations = "";
for(let i = 0 ; i < groupes.length ; i++) {
let groupe = groupes[i];
let prestations = prestationsGroupes[groupe['id']];
let active = (i == onglet ? 'active' : '');
htmlPrestations += '<div class="tab-pane min-h100 fade show '+active+'" id="pills-activites'+i+'" role="tabpanel" aria-labelledby="pills-activites'+i+'-tab">';
htmlPrestations += ' <div class="group-menu-form">';
for(let j = 0 ; j < prestations.length ; j++) {
let prestation = prestations[j];
let autoriseVae = prestation['autoriseVae'];
let cuissonApplicable = prestation['cuissonApplicable'];
let cdeCuisine = prestation['cdeCuisine'];
let CSSbgcolor = prestation['couleur'] == "" ? "" : 'style="background-color: '+prestation['couleur']+';"';
htmlPrestations += ' <a href="javascript:void(0);" data-id="'+prestation['id']+'" data-libelle="'+prestation['libelle']+'" data-prix="'+nvl(prestation['prix'], 0)+'" data-prix-emporter="'+nvl(prestation['prixEmporter'], 0)+'" data-tva="'+nvl(prestation['tva'], 0)+'" data-autorisevae="'+autoriseVae+'" data-cuissonapplicable="'+cuissonApplicable+'" data-cdecuisine="'+cdeCuisine+'" title="'+prestation['libelle']+'">';
htmlPrestations += ' <div class="menu-card" id="menu-card-'+prestation['id']+'" '+CSSbgcolor+'>';
htmlPrestations += ' <div class="name-menu" id="prestalib_'+prestation['id']+'">'+prestation['libelle']+'</div>';
htmlPrestations += ' <div class="group-menu">';
htmlPrestations += ' <div class="price-menu" id="prestaprix_'+prestation['id']+'">';
htmlPrestations += ' '+prestation['prix']+" €";
htmlPrestations += ' </div>';
htmlPrestations += ' </div>';
htmlPrestations += ' </div>';
htmlPrestations += ' </a>';
}
htmlPrestations += ' </div>';
htmlPrestations += '</div>';
}
$("#pills-tabContent").html(htmlPrestations);
...
</code>
<code>...
callAPI("/activites/prestationsFromGroupes", "POST", JSON.stringify(groupes)).then(prestationsGroupes => {
let htmlPrestations = "";
for(let i = 0 ; i < groupes.length ; i++) {
let groupe = groupes[i];
let prestations = prestationsGroupes[groupe['id']];
let active = (i == onglet ? 'active' : '');
htmlPrestations += '<div class="tab-pane min-h100 fade show '+active+'" id="pills-activites'+i+'" role="tabpanel" aria-labelledby="pills-activites'+i+'-tab">';
htmlPrestations += ' <div class="group-menu-form">';
for(let j = 0 ; j < prestations.length ; j++) {
let prestation = prestations[j];
let autoriseVae = prestation['autoriseVae'];
let cuissonApplicable = prestation['cuissonApplicable'];
let cdeCuisine = prestation['cdeCuisine'];
let CSSbgcolor = prestation['couleur'] == "" ? "" : 'style="background-color: '+prestation['couleur']+';"';
htmlPrestations += ' <a href="javascript:void(0);" data-id="'+prestation['id']+'" data-libelle="'+prestation['libelle']+'" data-prix="'+nvl(prestation['prix'], 0)+'" data-prix-emporter="'+nvl(prestation['prixEmporter'], 0)+'" data-tva="'+nvl(prestation['tva'], 0)+'" data-autorisevae="'+autoriseVae+'" data-cuissonapplicable="'+cuissonApplicable+'" data-cdecuisine="'+cdeCuisine+'" title="'+prestation['libelle']+'">';
htmlPrestations += ' <div class="menu-card" id="menu-card-'+prestation['id']+'" '+CSSbgcolor+'>';
htmlPrestations += ' <div class="name-menu" id="prestalib_'+prestation['id']+'">'+prestation['libelle']+'</div>';
htmlPrestations += ' <div class="group-menu">';
htmlPrestations += ' <div class="price-menu" id="prestaprix_'+prestation['id']+'">';
htmlPrestations += ' '+prestation['prix']+" €";
htmlPrestations += ' </div>';
htmlPrestations += ' </div>';
htmlPrestations += ' </div>';
htmlPrestations += ' </a>';
}
htmlPrestations += ' </div>';
htmlPrestations += '</div>';
}
$("#pills-tabContent").html(htmlPrestations);
...
</code>
...
callAPI("/activites/prestationsFromGroupes", "POST", JSON.stringify(groupes)).then(prestationsGroupes => {
let htmlPrestations = "";
for(let i = 0 ; i < groupes.length ; i++) {
let groupe = groupes[i];
let prestations = prestationsGroupes[groupe['id']];
let active = (i == onglet ? 'active' : '');
htmlPrestations += '<div class="tab-pane min-h100 fade show '+active+'" id="pills-activites'+i+'" role="tabpanel" aria-labelledby="pills-activites'+i+'-tab">';
htmlPrestations += ' <div class="group-menu-form">';
for(let j = 0 ; j < prestations.length ; j++) {
let prestation = prestations[j];
let autoriseVae = prestation['autoriseVae'];
let cuissonApplicable = prestation['cuissonApplicable'];
let cdeCuisine = prestation['cdeCuisine'];
let CSSbgcolor = prestation['couleur'] == "" ? "" : 'style="background-color: '+prestation['couleur']+';"';
htmlPrestations += ' <a href="javascript:void(0);" data-id="'+prestation['id']+'" data-libelle="'+prestation['libelle']+'" data-prix="'+nvl(prestation['prix'], 0)+'" data-prix-emporter="'+nvl(prestation['prixEmporter'], 0)+'" data-tva="'+nvl(prestation['tva'], 0)+'" data-autorisevae="'+autoriseVae+'" data-cuissonapplicable="'+cuissonApplicable+'" data-cdecuisine="'+cdeCuisine+'" title="'+prestation['libelle']+'">';
htmlPrestations += ' <div class="menu-card" id="menu-card-'+prestation['id']+'" '+CSSbgcolor+'>';
htmlPrestations += ' <div class="name-menu" id="prestalib_'+prestation['id']+'">'+prestation['libelle']+'</div>';
htmlPrestations += ' <div class="group-menu">';
htmlPrestations += ' <div class="price-menu" id="prestaprix_'+prestation['id']+'">';
htmlPrestations += ' '+prestation['prix']+" €";
htmlPrestations += ' </div>';
htmlPrestations += ' </div>';
htmlPrestations += ' </div>';
htmlPrestations += ' </a>';
}
htmlPrestations += ' </div>';
htmlPrestations += '</div>';
}
$("#pills-tabContent").html(htmlPrestations);
...
For example in the above photo there are 3 “rows” inside the div. So how to know that there are 3 “rows” ?