Modification apparence du sujet avec codes et box JavaScript

[julie10902]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://thegameforum.forumactif.com

Description du problème

Bonjour,

Je ne sais pas où mettre ce sujet (dans Apparence, Code ?).

Alors, mon problème, c'est que lorsque l'on poste un code

Code:

Comme ça par exemple

ou un avertissement grâce à du JavaScript (Tutoriel de FA), l'apparence commence a bugué et fait ça, http://thegameforum.forumactif.com/t67-essai-sujet.

Merci de m'expliquer à comment résoudre ce bug et m'aider.

Je suis également désolée de ne pas avoir mis ce sujet dans la bonne catégorie.

Très Cordialement,

julie10902

[MlleAlys]

Bonjour,
Si vous parlez de l'élargissement du forum, c'est dû au contenu de ce message-ci :
http://thegameforum.forumactif.com/t67-essai-sujet#489
Le mot "YOLOOOOOO..." est beaucoup trop long...

[julie10902]

Oui effectivement mais même avec les codes d'une ligne.

Sur votre forum ça ajusté comme ça :

Code:

Essaiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

[julie10902]

J'ai mis la même chose qu'ici sur le sujet et voyez par vous même

[MlleAlys]

Ajoutez le code suivant à votre feuille de style css :

Code:

.postbody {
  white-space: pre-line;
  word-break: break-word;
}

ça fonctionne sur chrome, il faudrait vérifier sur firefox et les autres navigateurs.

[julie10902]

Merci, ça marche sur Chrome, je vais faire l'essai sur Firefox et Edge

[julie10902]

ça ne marche pas sur Firefox et Edge

[julie10902]

J'ai trouvé l'astuce pour Firefox

Suffit de mettre :

Code:

white-space: -moz-pre;
  word-break: break-all;

en plus dans celui pour Chrome et ça marche également pour Edge.

D'ailleurs j'ai fait un essai avec seulement celle là et sans celle que vous m'aviez donné et ça marche également sur Chrome.

C'est résolu et je vous remercie

[MlleAlys]

Avec break-all, vous risquez d'avoir des soucis de mots coupés au lieu de revenir à la ligne, sur chrome au moins :


(évitez les doubles posts, préférez éditer votre message précédent.)

[julie10902]

Ok, je vais de ce pas vérifier avec break-word alors.

Oui désolé pour le double post, j'y penserai à l'avenir

EDIT : ça ne marche effectivement plus avec les autres navigateurs, ça marche seulement sur Chrome

[MlleAlys]

oui, je cherche encore une alternative, trouver quelque chose qui ne coupe les mots QUE s'ils sont trop longs, et qui fonctionne sur tous les navigateurs... ><"

[MlleAlys]

Essayez de remplacer le code par ceci :

Code:

.postbody {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

(la totale, un peu bourrin mais ça a l'air de fonctionner correctement au moins sur chrome ET firefox )

[julie10902]

Ah super ça fonctionne merci beaucoup

[MlleAlys]

Hum j'ai l'impression que ça coupe les mots sur Firefox maintenant...

[julie10902]

Oui et aussi sur Edge mais j'ai fait des essais on peut pas faire mieux (enfin pas à ma connaissance)

Si vous trouvez un autre truc j'accepte mais si non vous me le dîtes et je passe en résolu.

Sinon c'est très sympa à vous et surtout très rapide.

Merci beaucoup.

[julie10902]

UP

[Garionix]

Bonsoir,
Si j'ai compris, vous voulez avoir un retour à la ligne propre dès que le texte touche le cadre du corps de messages ?

[julie10902]

Oui et en plus que le mot ne soit coupé en deux vous voyez ?

[MlleAlys]

Un des soucis est à mon avis le fait que le tableau contenant .postbody n'a en fait pas de largeur absolue, mais juste 100%. Passer par le template pour fixer le layout fonctionnerait.

Ou remplacer le code précédent par :

Code:

.post table[width="100%"] {
  table-layout: fixed;
}

A vérifier si ça fonctionne sur les versions de IE, et si ça n'a pas d'effet secondaire indésirable autre part.

[julie10902]

Merci MlleAlys

Il faudrait tout remplacer le code de la dernière fois ?

[MlleAlys]

oui je pense que ça devrait suffire, sinon, juste ajouter :

Code:

.postbody {
  word-wrap: break-word;
}

[julie10902]

J'essaye de ce pas dans ce cas

Le word-wrap est déjà installé ^^

[julie10902]

Voici ce que sa fait : http://thegameforum.forumactif.com/t104-fddfdsf#532

Edit : avec le table et non avec le postbody (il est supprimé, je l'ai toujours dans mon logiciel de code ^^)

Edit 2 : ça décale tous les boutons éditer et tous en dehors du cadre et le code ne se mets bien que sur une ligne mais elle est longue, sinon je suis très satisfaite car c'est un résultat auquel je m'attendais ^^

[MlleAlys]

il faut effectivement ajouter le code sur .postbody pour avoir le bon comportement dans le message et dans le code.

[julie10902]

Je teste tout ça mais là c'est avec le code table à 100%, il faut que j'insère le postbody en plus de ce code donc ?

Edit : Effectivement, ça marche bien en le mettant sur plusieurs lignes mais maintenant ce sont les icônes d'édition, d'IP, de suppression et tout qui se sont décalées

[julie10902]

Voici l'image :

[MlleAlys]

Alors le table-layout n'est pas non plus la solution qui vous faut, puisqu'elle empêche toute déformation du tableau : ce qui est trop large dépasse, et c'est le cas pour vos images... A moins que vous ne souhaitiez qu'elles passent sur deux lignes, auquel cas le code à ajouter à votre feuille de style est :

Code:

td.post-options {
  white-space: normal;
}

[julie10902]

Je vais essayer pour voir le résultat

Edit : Mouais, ça fait un peu bizarre ^^ mais après on peut s'habituer je pense

Edit 2 : J'ai trouvé, il suffisait de mettre à 150% le code de la table ou 50 ^^

[MlleAlys]

Je ne peux pas vraiment aider, je ne vois pas les fameuses images en tant qu'invitée... Après, reste la modification des templates pour modifier la structure du tableau lui même pour un affichage qui vous conviendrait mieux.

[julie10902]

Oui c'est sûr, mais là grâce à vos codes, ça a l'air de bien marcher, les images d'édition et tout sont bien restructurées et le texte des codes également.

Tout m'a l"air parfait.

Merci beaucoup

Je passe donc en résolu.

Très Cordialement et Amicalement,

julie10902

PS : je ferai sûrement un message dans le topic des remerciements sur vous car vous êtes une des personnes les plus impliquées dans l'aide et êtes vraiment sympa