Twig, boucles for imbriqués afin d'afficher 2 éléments par ligne [Résolu/Fermé]

Signaler
Messages postés
68
Date d'inscription
dimanche 16 mars 2014
Statut
Membre
Dernière intervention
24 janvier 2017
-
Messages postés
68
Date d'inscription
dimanche 16 mars 2014
Statut
Membre
Dernière intervention
24 janvier 2017
-
Bonjour jeunes gens,

J'ai un problème très basique au niveau de mes boucles for que je souhaites imbriquer. L'objectif c'est de parcourir tous les éléments de ma liste et de les afficher tels que sur une ligne on puisse afficher deux éléments qui ce suivent dans ma liste

un exemple:

               
    {% for element in listelements %}
               <div class=row>
                        {% for element in 1 %}
                    <div class="pull-right">
                            {{element.id}}
                    </div>
                        {% endfor %}
                    <div class="pull-left">
                               {{element.id}}
                    </div>
               </div>
        {% else %}
         Pas d'éléments
   {% endfor %}


Bien sûr c'est faux, pourriez vous m'aider pour la syntaxe, s'il vous plaît?

1 réponse

Messages postés
24
Date d'inscription
mercredi 2 septembre 2015
Statut
Membre
Dernière intervention
11 octobre 2017
1
Salut,

je vois que tu utilise des classes bootstrap.
Alors au lieu de faire sa avec de l'algo, je te propose de faire ça à l'aide de ta mise en forme.

Alors le plus simple je pense est de créer un système de grille avec Bootstrap sachant que tu dispose de 12 colonnes par lignes.

Si tu veux 2 items par ligne il suffit de créer deux divs de 6 colonnes, ce qui te donnera 2 items par lignes.

par exemple :
{% if elements %}
    <div class=row>
	{% for element in listelements %}
            <div class="col-md-6 col-sm-6 col-lg-6 col-xs-6">
                <div class="pull-right">
                    {{element.id}}
                </div>
	    </div>
	{% endfor %}
    </div>
{% else %}
         {{ 'Pas d\'éléments' }}
{% endif %}

Dans cet exemple dans tout les cas tu aura 2 items par lignes, si tu en veux trois alors (12 colonnes / 3 items par lignes = 4 colonnes par items) tu remplace les col-%%-6 par des col-%%-4.

md et lg : tailles standards d'écrans (desktop).
sm et xs : petites tailles d'écrans (mobile).

Tu peux même passer d'une grille de 3 items pour les très grands écrans à 2 pour les écrans moyens jusqu'a 1 pour les plus petits etc ...

Je pense que c'est la meilleur manière de procéder.

En espérant t'avoir aidé.
Messages postés
68
Date d'inscription
dimanche 16 mars 2014
Statut
Membre
Dernière intervention
24 janvier 2017

MERCI beaucoup camarade pour cette astuce. Je n'ai pas réussi d'alternatives et cette solution semble la plus facile à mettre en place.