[RÉGLÉ] Balise [code] non responsive

[fredjouan]

Bonjour,
Sur cette page (https://www.fred-net.fr/blog/joomla/...ogle-analytics), l'utilisation de la balise [code] avec l'éditeur JCE n'est pas responsive et déclenche un scroll en bas de l'écran.
J'ai essayé de réduire le texte à 10pt, mais les chaines de caractères sont trop longues.
Quelqu'un a-t-il une solution ?
D'avance merci,
Fred

[lomart]

Re : Balise [code] non responsive

Bonjour Fred,

Je ne connais pas (ou plus trop) JCE
Il faut mettre ton code dans une balise div ou pre avec cette règle CSS : overflow-x:scroll;

Dans ton cas, cela donne

<div style="overflow-x:scroll">
<code> .... </code>
</div>

Comme cela sur un smartphone, l'ascenceur horizontal ne sera que sur le bloc code

[pmleconte]

Re : Balise [code] non responsive

Bonjour,

Dans le css associé à "code", il y a un beau white-space: nowrap; qui provoque le mode "non responsive" que tu remarques.

Dans ton custom.css, ajoute un

code {white-space: normal;}

et tu devrais avoir une balise code "responsive" qui fait rentrer ton code dans la page.

Pascal

[lomart]

Re : Balise [code] non responsive

tu devrais avoir une balise code "responsive" qui fait rentrer ton code dans la page.

Encore faut-il avoir un espace !
Perso, je n'aime pas trop les lignes de code qui passe à la ligne. Sur un site, l'important c'est la logique du code avec son indentation.

[pmleconte]

Re : Balise [code] non responsive

je n'aime pas trop les lignes de code qui passe à la ligne

Le but du responsive est d'essayer de tout faire rentrer sur l'écran, non ? et je ne pense pas que l'on utilise un téléphone portable pour faire un copie/coller dans son code...

Sauf erreur de ma part, Fred n'aimait pas le scroll, mais, je peux me tromper

Pascal

[lomart]

Re : Balise [code] non responsive

Le but du responsive est d'essayer de tout faire rentrer sur l'écran, non ?

Pas pour moi, c'est avoir une représentation adaptée aux petits écrans.
D'accord avec toi sur le fait que l'on n'utilise pas un téléphone portable pour faire un copier/coller dans son code. C'est plutôt pour rechercher une solution, d'où ma préférence pour conserver l'indentation. Surtout que les retours à la ligne se font sans respect de l'indentation comme c'est le cas dans les éditeurs genre Notepad++
Après c'est une question de goût et chacun choisse !!!

[fredjouan]

Re : Balise [code] non responsive

Bonjour,
Merci pour vos réponses. Je viens de tester la méthode "lomart" et un essai sur chrome - plugin petits formats : le scroll a disparu mais, comme l'indique l'image ci-dessous, le texte n'est pas affiché complètement :

Je n'ai pas de téléphone portable (normal !) et je ne peux tester en réel.
J'ai oublié quelque chose ?
Fred

[pmleconte]

Re : Balise [code] non responsive

Bonjour Fred,

Qu'entends-tu par

le texte n'est pas affiché complètement

Si cela correspond à notre discussion avec Lomart, essaies la méthode 'pascal'...

Pascal

[fredjouan]

Re : Balise [code] non responsive

Je viens de tester ta méthode Pascal, mais sans résultat probant, malgré le vidage des caches.
Par contre, je ne sais pas si la méthode est bien prise en compte. N'ayant pas trouvé de fichier custom.css, j'en ai créé un dans le dossier CSS du template, comme indiqué sur l'image suivante :



c'est bon ?

Ajout : Ce n'est pas bon, je viens d'ajouter un code couleur et il n'est pas appliqué (le texte reste rouge) :

code {
  color: #aaaaaa;
  white-space: normal;
}

[lomart]

Re : Balise [code] non responsive

Bonjour Fred,

Sur un template Protostar, si c'est ton cas, le fichier se nomme user.css

Sur ta copie d'écran, cela fonctionne. On n'a plus d'ascenseur horizontal général à la page, mais un ascenseur pour chaque bloc de code qui le nécessite. Après, comme notre discussion avec Pascal, sa solution est idéale pour du code sur UNE ligne et la mienne pour un bloc de plusieurs lignes.

Donc pour avoir le beurre, la crémière et tutti quanti, je ferais le CSS suivant :

code {white-space: normal}
pre code {white-space: pre}
pre {overflow-x:scroll}

1/ le code de pascal : saut de ligne pour du code dans une balise code
2/ pas de saut de ligne si la balise code est dans une balise pre
3/ on ajoute un ascenseur pour les balises pre

Le HTML devenant pour un code multiligne :

<pre>
<code> .... </code>
</pre>

[fredjouan]

Re : Balise [code] non responsive

Merci lomart, je m’aperçois d'une chose, j'ai retiré du code de l'article les balises <pre> en ne laissant que les balises <code> car elles me posaient problème dans la mise en page.
D'après ce que je comprends, la balise <pre> gère le contenu de l'ensemble et la balise <code> gère le contenu de chaque ligne.…

Par ailleurs, j'utilise des templates fabriqués avec templatecreatorck, c'est pourquoi j'ai créé le fichier custom.css dans le répertoire CSS du template, comme sur l'image du message précédent.



Doit-il être placé dans le répertoire CSS ou à la racine du template (au même niveau que le fichier index.php) ?

Si ce fichier voulait fonctionner, je tenterai bien la méthode "avec le postérieur de la crémière"

Je suis en train de penser à une chose : Cédric m'avait un jour conseillé d'ajouter un fichier override.css dans le dossier CSS. C'est peut-être la solution de renommer le fichier custom.css ?

[lomart]

Re : Balise [code] non responsive

j'ai retiré du code de l'article les balises <pre> en ne laissant que les balises <code> car elles me posaient problème dans la mise en page.

PRE est une balise pour un bloc de code alors que CODE est celle pour du code en ligne

Cédric m'avait un jour conseillé d'ajouter un fichier override.css dans le dossier CSS. C'est peut-être la solution de renommer le fichier custom.css ?

Peut-être ? il faut tester

[fredjouan]

Re : Balise [code] non responsive

Non, ça ne veut pas le faire. Poisse à pouire !
Je n'arrive pas à trouver ces balises dans les feuilles CSS du template. En faisant "Examiner l'élément" dans Firefox, on trouve bien le code, mais dans un fichier optimisé par JCH Optimize :

https://www.static.fred-net.fr/cache/plg_jch_optimize/e9b4344a086b06ee4024c9dce93f4d6c_0.css

L'emplacement initial doit être ailleurs, mais où ? Je viens de me taper les feuilles CSS default et template (c'est la feuille principale de templatecreatorck), sans rien trouver.

Ajouté à 14h32 : Quel idiot, en désactivant JCH Optimize, ces balises sont traitées dans la feuille bootstrap.css

[ced1870]

Re : Balise [code] non responsive

salut
dans template creator, tu as la possibilité d'éditer le fichier "custom.css" directement dans l'interface : Paramètres >> Custom CSS
CEd

[fredjouan]

Re : Balise [code] non responsive

Salut Cédric,
Oui, c'est peut-être mieux d'appliquer cette règle dans le fichier custom.css, pour éviter les ennuis lors d'une mise à jour.
Le rendu est nickel sur tous les formats, même les plus petits, et le look a été modifié pour mieux s'intégrer avec le template.
Merci beaucoup à tous les trois pour votre aide,
Fred