Twig, boucles for imbriqués afin d'afficher 2 éléments par ligne

Résolu/Fermé

Fontainard Messages postés 68 Date d'inscription dimanche 16 mars 2014 Statut Membre Dernière intervention 24 janvier 2017 - Modifié par Fontainard le 21/07/2016 à 15:08
Fontainard Messages postés 68 Date d'inscription dimanche 16 mars 2014 Statut Membre Dernière intervention 24 janvier 2017 - 3 août 2016 à 11:16

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?

A voir également:

Twig, boucles for imbriqués afin d'afficher 2 éléments par ligne
Hors ligne instagram - Guide
Aller à la ligne excel - Guide
Vente en ligne particulier - Guide
Supercopier 2 - Télécharger - Gestion de fichiers
2 comptes whatsapp - Guide

1 réponse

Réponse 1 / 1

jubasse Messages postés 24 Date d'inscription mercredi 2 septembre 2015 Statut Membre Dernière intervention 11 octobre 2017 1
22 juil. 2016 à 10:38

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

Fontainard Messages postés 68 Date d'inscription dimanche 16 mars 2014 Statut Membre Dernière intervention 24 janvier 2017
3 août 2016 à 11:16

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

Discussions similaires

programme qui n'affiche pas le mot secret

Que veut dire "correspondant occupé" lors d'un appel ?

Afficher toutes les lignes masquées excel

Statut « en ligne » alors que non

Discussions similaires

Newsletters