Largeur des blocs code

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Largeur des blocs code

Message par MlleAlys le Ven 12 Fév 2016 - 1:02

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome, Internet Explorer
Personnes concernées par le problème : Tous les utilisateurs
Capture d'écran du problème :
Voir l'image :
Lien du forum : http://forum-test-phpbb2.forumactif.org/t3-sujet-test-1#5

Description du problème

Bonjour,

J'ai remarqué que lors d'une longue ligne de code (ou d'un mot très long), l'affichage du bloc "code" élargit la page malgré l'apparition de la barre de défilement horizontale...
Je suppose que de base, c'est sensé être 90% du contenant, et barre de défilement horizontale au delà, mais apparemment dans ce cas ça ne fonctionne pas correctement !

J'ai cherché comment contrôler la largeur du bloc, mais à part appliquer une largeur fixe au bloc je n'ai pas réussi à revenir à une largeur "normale" qui ne déforme pas. Et ça m'embête parce que les contenants n'ont pas tous la même largeur, j'aimerais bien retrouver le 90% prévu !

Bref, je précise que sur mon forum test je n'ai ni css personnalisé, ni codes javascripts ajoutés, ni templates modifiés. Voilà le sujet avec le bloc code :
http://forum-test-phpbb2.forumactif.org/t3-sujet-test-1#5

Merci d'avance pour votre aide pour régler ce problème ! Smile





Edit : suite aux messages plus bas, j'ai remis le code css suivant à la feuille de style du forum :
Code:
.codebox {
    width: 50%;
}

Voilà deux sujets test supplémentaires avec le contenu de chaque message :
test code 1, déformation :
lien : http://forum-test-phpbb2.forumactif.org/t27-test-code-1#63

contenu :
Code:
[code]Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Lorem ipsum ardeo, mihi credite, Patres conscripti (id quod vosmet de me existimatis et facitis ipsi) incredibili quodam amore patriae, qui me amor et subvenire olim impendentibus periculis maximis cum dimicatione capitis, et rursum, cum omnia tela undique esse intenta in patriam viderem, subire coegit atque excipere unum pro universis. Hic me meus in rem publicam animus pristinus ac perennis cum C. Caesare reducit, reconciliat, restituit in gratiam.
Caesare reducit, reconciliat, restituit in gratiam.
Hic me meus in rem publicam animus pristinus ac perennis cum C.
Caesare reducit, reconciliat, restituit in gratiam.
Hic me meus in rem publicam animus pristinus ac perennis cum C.Caesare reducit, reconciliat, restituit in gratiam.
Caesare reducit, reconciliat, restituit in gratiam. Patres conscripti (id quod vosmet de me existimatis et facitis ipsi) incredibili quodam amore patriae, qui me amor et subvenire olim impendentibus periculis maximis cum dimicatione capitis, et rursum, cum omnia tela undique esse intenta in patriam viderem, subire coegit atque excipere unum pro universis. Hic me meus in rem publicam animus pristinus ac perennis cum C. Caesare reducit, reconciliat, restituit in gratiam.
Hic me meus in rem publicam animus pristinus ac perennis cum C.Caesare reducit, reconciliat, restituit in gratiam.[/code]

test code 2, pas de déformation :
lien : http://forum-test-phpbb2.forumactif.org/t28-test-code-2#64

contenu :
Code:
[code]Lorem ipsum ardeo, mihi credite, Patres conscripti (id quod vosmet de me existimatis et facitis ipsi) incredibili quodam amore patriae, qui me amor et subvenire olim impendentibus periculis maximis cum dimicatione capitis, et rursum, cum omnia tela undique esse intenta in patriam viderem, subire coegit atque excipere unum pro universis. Hic me meus in rem publicam animus pristinus ac perennis cum C. Caesare reducit, reconciliat, restituit in gratiam.
Caesare reducit, reconciliat, restituit in gratiam.
Hic me meus in rem publicam animus pristinus ac perennis cum C.
Caesare reducit, reconciliat, restituit in gratiam.
Hic me meus in rem publicam animus pristinus ac perennis cum C.Caesare reducit, reconciliat, restituit in gratiam.
Caesare reducit, reconciliat, restituit in gratiam. Patres conscripti (id quod vosmet de me existimatis et facitis ipsi) incredibili quodam amore patriae, qui me amor et subvenire olim impendentibus periculis maximis cum dimicatione capitis, et rursum, cum omnia tela undique esse intenta in patriam viderem, subire coegit atque excipere unum pro universis. Hic me meus in rem publicam animus pristinus ac perennis cum C. Caesare reducit, reconciliat, restituit in gratiam.
Hic me meus in rem publicam animus pristinus ac perennis cum C.Caesare reducit, reconciliat, restituit in gratiam.[/code]

C'est bien la ligne de "aaaaaaa..." qui déforme la page malgré la largeur limité du bloc code.


Dernière édition par MlleAlys le Sam 13 Fév 2016 - 0:42, édité 4 fois

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Largeur des blocs code

Message par Musara le Ven 12 Fév 2016 - 17:39

Salut MlleAlys,

Lorsque tu dis avoir "appliqué une largeur fixe au bloc", comment as-tu procédé ? Avec du CSS ? As-tu essayé d'appliquer une largeur maximale ?

Par exemple :

Code:
.cont_code{
max-width:500px;
}

En remplaçant les 500px par ce que tu veux (ça peut aussi être un pourcentage).

En espérant que ça donne quelque chose !

Musara
**

Masculin
Messages : 50
Inscrit(e) le : 02/01/2016

http://musaraignes.forumactif.fr/
Musara a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Largeur des blocs code

Message par MlleAlys le Ven 12 Fév 2016 - 18:07

Oui, avec le même code que le tient, et d'autres également en voyant que ça ne convenait pas...
Une largeur fixe en pixels ne m'intéresse pas, c'est effectivement un pourcentage que je souhaite, mais ça ne fonctionne pas puisque la page est toujours élargie malgré le code et la barre de défilement qui apparait.
Un code testé en particulier :
Code:
.codebox {
  width: 50%;
}
Résultat : le bloc code fait bien 50% de la largeur du bloc message... qui lui est toujours élargi !
(toujours observable sur le message suivant :
http://forum-test-phpbb2.forumactif.org/t3-sujet-test-1#5
j'ai ajouté le code css précédent dans la feuille de style du forum, c'est le seul présent)

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Largeur des blocs code

Message par Musara le Ven 12 Fév 2016 - 18:24

Ok !

C'est vrai que c'est assez étrange. En examinant le code source de ta page, on voit que ton bloc de code est placé dans un élément span :

Code:
<span class="postbody">BLOC_DE_CODE</span>

C'est toi qui l'as ajouté ? Sur mon forum les blocs codes ne sont pas englobés par ça...

En tout cas c'est ce bloc là qui a une largeur qui déforme ton forum, est-ce que le CSS suivant corrige le problème ?

Code:
span.postbody{
max-width:90%;
}

Musara
**

Masculin
Messages : 50
Inscrit(e) le : 02/01/2016

http://musaraignes.forumactif.fr/
Musara a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Largeur des blocs code

Message par MlleAlys le Ven 12 Fév 2016 - 18:39

Le bloc postbody est celui qui contient le message, il fait partie du template par défaut de l'affichage des sujets en phpbb2, que je n'ai pas modifié.
De plus le coupable est bien le bloc de code puisque si je rétrécie celui-ci ou permet un retour à la ligne, il n'y a plus de déformation.
Voilà deux sujets test supplémentaires avec le contenu de chaque message :
test code 1 :
lien : http://forum-test-phpbb2.forumactif.org/t27-test-code-1#63

contenu :
Code:
[code]Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Lorem ipsum ardeo, mihi credite, Patres conscripti (id quod vosmet de me existimatis et facitis ipsi) incredibili quodam amore patriae, qui me amor et subvenire olim impendentibus periculis maximis cum dimicatione capitis, et rursum, cum omnia tela undique esse intenta in patriam viderem, subire coegit atque excipere unum pro universis. Hic me meus in rem publicam animus pristinus ac perennis cum C. Caesare reducit, reconciliat, restituit in gratiam.
Caesare reducit, reconciliat, restituit in gratiam.
Hic me meus in rem publicam animus pristinus ac perennis cum C.
Caesare reducit, reconciliat, restituit in gratiam.
Hic me meus in rem publicam animus pristinus ac perennis cum C.Caesare reducit, reconciliat, restituit in gratiam.
Caesare reducit, reconciliat, restituit in gratiam. Patres conscripti (id quod vosmet de me existimatis et facitis ipsi) incredibili quodam amore patriae, qui me amor et subvenire olim impendentibus periculis maximis cum dimicatione capitis, et rursum, cum omnia tela undique esse intenta in patriam viderem, subire coegit atque excipere unum pro universis. Hic me meus in rem publicam animus pristinus ac perennis cum C. Caesare reducit, reconciliat, restituit in gratiam.
Hic me meus in rem publicam animus pristinus ac perennis cum C.Caesare reducit, reconciliat, restituit in gratiam.[/code]

test code 2 :
lien : http://forum-test-phpbb2.forumactif.org/t28-test-code-2#64

contenu :
Code:
[code]Lorem ipsum ardeo, mihi credite, Patres conscripti (id quod vosmet de me existimatis et facitis ipsi) incredibili quodam amore patriae, qui me amor et subvenire olim impendentibus periculis maximis cum dimicatione capitis, et rursum, cum omnia tela undique esse intenta in patriam viderem, subire coegit atque excipere unum pro universis. Hic me meus in rem publicam animus pristinus ac perennis cum C. Caesare reducit, reconciliat, restituit in gratiam.
Caesare reducit, reconciliat, restituit in gratiam.
Hic me meus in rem publicam animus pristinus ac perennis cum C.
Caesare reducit, reconciliat, restituit in gratiam.
Hic me meus in rem publicam animus pristinus ac perennis cum C.Caesare reducit, reconciliat, restituit in gratiam.
Caesare reducit, reconciliat, restituit in gratiam. Patres conscripti (id quod vosmet de me existimatis et facitis ipsi) incredibili quodam amore patriae, qui me amor et subvenire olim impendentibus periculis maximis cum dimicatione capitis, et rursum, cum omnia tela undique esse intenta in patriam viderem, subire coegit atque excipere unum pro universis. Hic me meus in rem publicam animus pristinus ac perennis cum C. Caesare reducit, reconciliat, restituit in gratiam.
Hic me meus in rem publicam animus pristinus ac perennis cum C.Caesare reducit, reconciliat, restituit in gratiam.[/code]

C'est bien la ligne de "aaaaaaa..." qui déforme la page !

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Largeur des blocs code

Message par Musara le Ven 12 Fév 2016 - 21:01

J'ai un peu regardé cette histoire et c'est assez compliqué de trouver une solution si on veut des largeurs relatives. Un retour à la ligne comme ici sur le forum des forums me parait le plus propre, tu veux vraiment garder le code sur une ligne ?

Bon en tout cas pour le problème de largeur j'ai trouvé un élément de réponse ici :
http://stackoverflow.com/questions/20993947/css-prevent-a-specific-child-div-from-expanding-the-parent-div

Du coup en adaptant chez nous et en bidouillant pour récupérer une apparence similaire, j'obtiens un résultat pas trop mal en faisant :

JAVASCRIPT SUR TOUTES LES PAGES :

Code:
$(function(){

   var code_boxes = $('.cont_code');
   
   for (var iter = 0; iter < 30; iter++) {
   
      $(code_boxes[iter]).clone().insertAfter(code_boxes[iter]);
      
   }

});

CSS :

Code:
.code{
position:relative;
}

.code .cont_code:first-child{
width:100%;
position:absolute;
}

.code .cont_code:last-child{
width:50px;
visibility:hidden;
white-space: nowrap;
}

Musara
**

Masculin
Messages : 50
Inscrit(e) le : 02/01/2016

http://musaraignes.forumactif.fr/
Musara a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Largeur des blocs code

Message par Neptunia le Ven 12 Fév 2016 - 21:20

Bonjour ^^

Peut-être avec ce CSS :
Code:
    .code div.cont_code {
      word-wrap: break-word;
    }

Pour du texte, ça devrait aller, en revanche s'il s'agit vraiment de code, ça risque de poser souci.

Neptunia
+ Hyperactif +

Féminin
Messages : 10392
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Largeur des blocs code

Message par MlleAlys le Ven 12 Fév 2016 - 22:18

Merci pour vos idées !
Alors pour vous répondre à tous les deux oui je cherchais un moyen permettant de garder intactes les lignes de code, je connaissais cette propriété mais merci quand même Neptunia- Wink

Musara, ça a l'air de fonctionner pas mal, la largeur redevient correcte ! Very Happy Par contre il y a un léger jeu en hauteur maintenant, je suppose que je dois pouvoir bidouiller avec le css pour revenir à un aspect correct, mais peut être que tu pourras corriger à la source (j'ai regardé un peu mais j'ai du mal à dire d'où vient cette différence exactement) et que ce sera préférable à mes bidouillages pour camouflages du problème ? ... Confused
Visualisation sur mon sujet test 1 : http://forum-test-phpbb2.forumactif.org/t27-test-code-1#65

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Largeur des blocs code

Message par Musara le Ven 12 Fév 2016 - 22:45

Ah oui effectivement ça fait des trucs bizarres !

Le souci d'affichage vient du fait que .cont_code:first-child et .cont_code:last-child n'ont pas tout à fait les mêmes dimensions.

Le first-child est celui qui est affiché (en mode position absolute pour ne pas déformer)

Le last-child est celui qui sert à donner la bonne hauteur au bloc de code (mais il n'est pas affiché)


Sur ton lien de test, le premier souci est à mon avis réglé par le CSS suivant :

Code:
.code{
position:relative;
}
   
.code .cont_code:first-child{
width:100%;
position:absolute;
white-space: nowrap;
}
   
.code .cont_code:last-child{
width:50px;
visibility:hidden;
white-space: nowrap;
}

Le last-child avait la propriété qui l'empêchait de sauter une ligne (même pour une ligne contenant des espaces) mais pas le first. Ce qui fait que le first sautait des lignes et était plus haut, et donc débordait de la hauteur du cadre (déterminée par last).
Là avec ce CSS personne ne saute de ligne normalement, ils devraient avoir la même hauteur.


Le deuxième souci, lui, est celui que je n'ai pas réussi à corriger. Last-child (qu'on ne voit pas) a une largeur de 50 pixels pour à coup sûr ne pas déformer ton forum, mais du coup il passe en overflow même pour des petites lignes de code. Ce qui fait qu'il contient une barre de défilement horizontale même si first-child n'en a pas. C'est ça qui fait que le fond de la boite de code dépasse en bas par rapport au code.

Forcer un :

Code:
.code .cont_code:last-child{
overflow:hidden !important;
}

Permettrait de supprimer la barre de défilement, et donc dans le cas présent ça règlerait le problème.

Mais ça introduirait un autre problème : Si first et last sont tous les deux en overflow, seul first aura une barre de défilement, il dépassera donc du cadre...

Bref, une solution pourrait être de faire un truc du genre :

Code:
.code{
visibility:hidden;
}
   
.code .cont_code:first-child{
/* style CSS actuel de .code */
}

On aurait toujours un encombrement erroné, mais au moins l'affichage serait bon !

Je ne sais pas ce que tu en penses, si tu as d'autres idées... C'est de la bidouille un peu sale xD

Musara
**

Masculin
Messages : 50
Inscrit(e) le : 02/01/2016

http://musaraignes.forumactif.fr/
Musara a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Largeur des blocs code

Message par Neptunia le Ven 12 Fév 2016 - 23:11

Je viens de vérifier le word-wrap, il ne crée que des sauts de ligne "virtuels"

Au copier-coller, les "gros mots" sont de nouveau en un seul morceau Wink

Neptunia
+ Hyperactif +

Féminin
Messages : 10392
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Largeur des blocs code

Message par MlleAlys le Ven 12 Fév 2016 - 23:55

Neptunia-, oui je sais, désolée je me suis mal exprimée, je parle d'un point de vue visuel, à l'affichage, avec les indentations pour la présentation de la structure du code, etc, les retours à la ligne ont tendant à me perturber, je m'y retrouve mieux quand les lignes ne sont pas brisées, juste une question d'habitude je suppose Wink


Musara, bidouille peut être mais ça fonctionne ! cheers Ne pas oublier par contre le visibility:visible; pour le first-child du coup ^^
Il reste une petite marge sous le cadre, mais franchement elle m'embête pas !


EDIT : oups non avec le visibility c'ets un mauvais plan : c'est aussi codebox dd qui contient les quote et les spoilers ! Du coup je préfère garder la petite marge dans le bloc, tant pis ! Razz

Mon css final :
Code:

.code{
  position:relative;
}
 
.code .cont_code:first-child{
  width:100%;
  position:absolute;
  white-space: nowrap;
}
 
.code .cont_code:last-child{
  width:50px;
  visibility:hidden;
  white-space: nowrap;
}

A noter : je n'ai remarqué aucun souci de compatibilité avec le tuto du forum des forums pour la sélection du contenu du code, par contre je n'ai pas testé avec des codes pour la numérotation des lignes.

Bref, je mets donc ce sujet en résolu, merci encore c'est super !! Very Happy

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum