Largeur des blocs code

[MlleAlys]

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 !

---

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 :

test code 2, pas de déformation :

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

[Musara]

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 !

[MlleAlys]

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)

[Musara]

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%;
}

[MlleAlys]

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 :

test code 2 :

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

[Musara]

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;
}

[Neptunia]

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.

[MlleAlys]

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-

Musara, ça a l'air de fonctionner pas mal, la largeur redevient correcte ! 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 ? ...
Visualisation sur mon sujet test 1 : http://forum-test-phpbb2.forumactif.org/t27-test-code-1#65

[Musara]

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

[Neptunia]

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

[MlleAlys]

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


Musara, bidouille peut être mais ça fonctionne ! 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 !

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 !!