28173 sujets

CSS et mise en forme, CSS3

Flexbox : exclure un item 'parasite' du comportement Flex

Bonjour a tous,

Je suis confrontée à un souci auquel je ne trouve pas de solutions. J'ai une liste d'éléments pour lesquels j'utilise le module flexbox. Tout marchait bien jusqu'a ce qu'un collègue fasse une évolution sur les templates répétés dans la liste. Pour des raisons complexes, il n'a pas d'autres choix que de placer une balise script dans ce template, et cela a pour effet de créer une arbo de type : <div></div><script></script><div></div><script></script> etc...
Le problème est que flexbox prend en compte la balise script et les pseudo éléments. Pour les pseudo éléments, le livre de Raphael Goetter donne une ruse. Par contre, je ne vois pas comment faire pour la balise script...
Il serait possible de mettre le script dans une balise div, mais cela fait reprencre beaucoup de templates. L'idéal serait donc une soluce CSS.
Merci à vous Smiley cligne
Bonjour kaorie,

Quel comportement observes-tu en disant ceci ?
kaorie a écrit :
Le problème est que flexbox prend en compte la balise script


Pourrais-tu réaliser une démonstration de ce comportement ?
Par exemple j'ai fait un petit codepen avec un structure flex et une balise script, mais en l'état je n'observe rien de plus qu'une rupture logique du décompte des éléments avec nth-child...
http://codepen.io/anon/pen/JRBOZW

Smiley smile
Bonjour, et merci pour ta réponse.
Le comportement que j'observe est très proche de ton Codepen, je peux t'en faire un si tu le souhaites, mais au final, ça se rapproche de ce que tu observe.
La seule différence est qu'après chaque div enfant, on a une balise script, et non uniquement après la dernière balise Div, comme sur ton exemple. Mais au final on obtient un souci avec les nth:child. Du coup, je me demande en effet, si le souci ne vient pas des nth:child. Je m'explique : j'applique des marges différentes aux éléments de la liste en calculant leur position dans cette dernière. J'ai trois éléments qui se positionnent les uns a côtés des autres et se répètent en liste. Celui positionné au milieu aura toujours une marge gauche et droite.
Par contre, comme toi j'applique ma marge aux éléments de type div, enfants de ma div conteneur en display flex. Du coup, je ne comprends pas pourquoi les éléments sont décalés. Car les marges sont bien appliquées aux éléments de type div, comme sur ton codepen...
J'essaierai de faire un exemple sur Codepen ce Week end pour que ce sois plus simple pour vous Smiley smile
En attendant merci pour le temps passé, c'est super sympa !!
Bon week end a vous !
Si le problème est au niveau du décompte des éléments du DOM, alors la solution viable est de construire un DOM correspondant au besoin.

CSS n'est pas fait pour modifier le DOM. Du moins pas au delà des pseudo-éléments.
Pour répondre à ta problématique, je ne vois donc qu'une intervention JavaScript (mais c'est de la rustine) ou de toucher aux templates.
Modérateur
si la balise script est inclus tout les x éléments, nth-child() permet efficacement de les cibler ou de les évitées.

ex fork de erwan21a http://codepen.io/gc-nomade/pen/amaBkj
mimant odd/even pour les couleurs
donnant une marge au deuxieme de chaque serie de trois

en attendant ton codepen qui expliquerais pourquoi la balise script serait en interaction avec le layout. Cette balise est en principe invisible à moins de faire sciemment un reset sur sa valeur de display http://codepen.io/gc-nomade/pen/mAGomW

Cdt
Merci beaucoup pour vos réponses ! Je n'ai pas eu accès au code aujourd'hui, mais j'essaie de vous poster le code pen demain. Mon bug ressemble comme je l'ai dit fortement au code donné par Erwan21a, hormis les balises script qui s'incluent après chaque div.
Concernant le DOM, je dois malheureusement parfois faire avec. La plupart du temps il est 'propre', là c'est un cas particulier. Du coup, je dois 'tricher' en CSS.

@gcyrillus : Mon code ressemble pas mal au tien, mais le rendu est différent Smiley smile
Dans le sens ou la balise script chez moi 'casse' le système des nth-child. Ce que je ne saisis pas, c'est la différence de rendu entre vos eux code Pen. Je m'explique, vous agissez tous les deux sur les nth-child, en ciblant les mêmes balises, sauf que l'un joue sur les pairs et impairs, et l'autre sur les calculs d'enfants... On ne cible pas de la même façon, mais les mêmes balises, donc les balises script ne devraient pas interférer.

Du coup, le souci semble venir chez moi des nth-child et non du système flexbox (bien que je me demande si un float au lieu d'un module flex peut casser de manière similaire en ajoutant des balises script). C'est étonnant, car comme vous, je ne cible que les div (donc normalement, il se fiche des balises script) et que Raphael Goetter parle bien du souci qu posent certaines balises dans le système flex...

Quoiqu'il en soit, je crois que mon collègue a trouvé une solution pour ne pas répéter les balises. Mais je suis frustrée de ne pas comprendre Smiley langue , donc je vais continuer a creuser, vous faire un code pen qui reproduit bien la situation, même si au final celui de gcyrillus reflète bien le Dom que j'ai (pour les divs de premier niveau).

En tout cas, merci a vous !
Bonjour,
Comme promis, un codepen avec le problème rencontré :

http://codepen.io/kaorie/pen/bwmRbW

Dans celui ci, les marges ne s'appliquent pas pour des rangées de 3 éléments mais pour des listes de 2 (j'ai le même problème sur une liste de 3 et une liste de 2, il était plus simple pour moi de repartir de ce que vous avez fait pour vous représenter le problème, au final seuls les nth child diffèrent).
Il semblerait que ce qui 'casse' la dynamique, c'est le fait de ne pas préciser ' flex: 1;'
Merci à vous en tout cas Smiley smile
kaorie a écrit :
Bonjour,
Comme promis, un codepen avec le problème rencontré :

http://codepen.io/kaorie/pen/bwmRbW

Dans celui ci, les marges ne s'appliquent pas pour des rangées de 3 éléments mais pour des listes de 2 (j'ai le même problème sur une liste de 3 et une liste de 2, il était plus simple pour moi de repartir de ce que vous avez fait pour vous représenter le problème, au final seuls les nth child diffèrent).
Il semblerait que ce qui 'casse' la dynamique, c'est le fait de ne pas préciser ' flex: 1;'
Merci à vous en tout cas Smiley smile


Donc :
http://codepen.io/anon/pen/JRmrdK

Mais c'est quand même très bancale comme intégration...
Le dev qui s'occupe de cette partie a pu faire autrement, du coup, le problème ne se pose plus. Pour certains développements poussés, je suis dois faire avec certaines contraintes dues aux devs spécifiques. Là, j'ai demandé si on pouvait faire autrement et le dev a réussit a trouver une autre solution. Mais il n'empêche, je souhaite comprendre pourquoi cela fonctionne avec un Nth-child et non avec un odd... puisque de toute façon, on précise bien que l'on souhaite ce comportement sur la div. C'est assez frustrant de ne pas comprendre Smiley smile
kaorie a écrit :
Le dev qui s'occupe de cette partie a pu faire autrement, du coup, le problème ne se pose plus. Pour certains développements poussés, je suis dois faire avec certaines contraintes dues aux devs spécifiques. Là, j'ai demandé si on pouvait faire autrement et le dev a réussit a trouver une autre solution. Smiley smile


En conception modulaire il est toujours préférable d'encapsuler les modules dans un container neutre ou flexible car on ne connait pas le contexte dans lequel il sera utilisé.
Pour faire une analogie, un module est un peu comme un tas de sable : c'est plus simple à gérer lorsque c'est placé dans un bas. Et encore mieux lorsque ce bac est empilable.

kaorie a écrit :
Mais il n'empêche, je souhaite comprendre pourquoi cela fonctionne avec un Nth-child et non avec un odd... puisque de toute façon, on précise bien que l'on souhaite ce comportement sur la div. C'est assez frustrant de ne pas comprendre Smiley smile


Je trouve que la description de la spécification de nth-child est plutôt clairement expliqué sur le Mozilla Developer Network Smiley cligne
Sujet clos
Aller à