1469 sujets

Web Mobile et responsive web design

Bonjour,

Prenons une grid toute simple.

grid-template-columns: auto 1fr;

Dans la deuxième colonne, j'ai un grid item avec à l'intérieur des images à largeur fixe et du texte.

<img width=500 />
<p>un long texte</p>
<img width=500 />
<p>un long texte</p>
etc.

Si je rétrécis la fenêtre à moins de 500px ma deuxième colonne est bloquée par les images à largeur 500px et mon texte devient partiellement caché, alors que je veux qu'il s'adapte de façon fluide à la largeur de la fenêtre.

Je peux régler le problème en créant un flex-item par image et un flex-item par p mais ma question est :

Dans un même flex item dont la largeur est inconnue comment faire pour que le texte s'adapte à largeur de la fenêtre alors que d'autres éléments sont plus larges que la fenêtre ?

J'espère que ma question est claire.
Modifié par boteha_2 (30 Nov 2022 - 20:45)
Bonjour Laurent,

Merci de ton suivi.

Ton lien représente exactement l'effet recherché.

Par contre, quand dans mon code j'ajoute Overflow:hidden sur le grid item il ne se passe rien.

Il faudrait que je fasse un codepen, je m'en occupe dès que possible.

À la base une chose qui me chiffonne :

grid-template-columns: auto 1fr;

J'attribue à la deuxième colonne une largeur de 1fr, soit tout l'espace disponible dans la fenêtre mais pas plus.

Quand mon image dépasse 1fr, est-il normal qu'elle élargisse le grid-item au-delà de 1fr ?
Le comportement normal n'est-il pas de laisser l'image dépasser du grid-item dont la largeuir reste de 1fr

J'ai attribué au grid-item align-self: start; justify-self: start; mais cela ne résout rien.

À bientôt avec mon codepen.
Administrateur
boteha_2 a écrit :
J'attribue à la deuxième colonne une largeur de 1fr, soit tout l'espace disponible dans la fenêtre mais pas plus.

Quand mon image dépasse 1fr, est-il normal qu'elle élargisse le grid-item au-delà de 1fr ?
Le comportement normal n'est-il pas de laisser l'image dépasser du grid-item dont la largeuir reste de 1fr

Hello,

En fait non, c'est normal : une taille de colonne en "fr" fait au minimum la taille de son contenu (sous-entendu "1fr" = "minmax(min-content, 1fr)") donc elle s'adapte à la taille de ton image.

Si tu veux que ta colonne puisse se rétrécir, la bonne valeur est minmax(0, 1fr). C'est une valeur beaucoup plus sûre que "1fr" d'ailleurs.

Bonne journée Smiley smile
Modifié par Raphael (01 Dec 2022 - 14:09)
Bonjour Raphaël,

Merci de ta réponse.

Depuis quelques jours ton livre sur display GRID est mon livre de chevet, afin d'essayer de résoudre ce problème.

Je fais des tests en fin de journée et reviendrai vers vous.
Je n'y arrive toujours pas et cela m'énerve.

En l’occurrence cela concerne l'élément #recherche

@media screen and (min-width: 769px)
{
body {grid-template-columns: 45px 20em auto minmax(0, 1fr); grid-template-rows: 45px auto auto; grid-template-areas: "i t m s" "n p r r" "f f f f"}
a#logo_mob {grid-area: i}
p#logo {grid-area: t}
ul#menuhaut {grid-area: m}
div#panier {grid-area: p; width: 20em}
#recherche {grid-area: r; margin: 35px 10px 0 45px}
div#footer {grid-area: f}
}

#recherche {align-self: start; justify-self: start; overflow: hidden}

@media screen and (max-width: 768px)
{
body {grid-template-columns: auto minmax(0, 1fr); grid-template-rows: repeat (6, auto); grid-template-areas: "s s" "i m" "a a" "r r" "f f" "p p"}
div#header {grid-area: s}
a#logo_mob {grid-area: i}
ul#menuhaut {grid-area: m}
p#mob {grid-area: a}
#recherche {grid-area: r}
#footer {grid-area: f}
div#panier {grid-area: p;  width: auto}
}


Quelque chose dans ce code explique-t-il la problème avec #recherche ?
Modifié par boteha_2 (01 Dec 2022 - 19:36)
Bonjour,

Accessoirement je ne peux pas agir sur le width de #recherche

#recherche {max-width: 200px !important}

Cela n'a aucun effet sur la largeur de cet élément.

Il est de fait en largeur auto et cela fixe définitivement la largeur du grid-item qui le contient.
Bonjour,

Sur un site de test ce lien illustre le problème, aussi bien en version PC que Mobile.
C'est le tableau des prix qui joue le rôle de l'image à taille fixe.

C'est un site de test, ne pas faire attention aux warnings.
Modifié par boteha_2 (02 Dec 2022 - 22:05)
Administrateur
boteha_2 a écrit :

Sur un site de test ce lien

Tu peux préciser (illustrer ?) quel est exactement le problème sur cette page ?
Attention, tu as placé tous les éléments <meta> dans... body, ça a forcément des conséquences sur l'interprétation du code par un navigateur puisque tous ces éléments deviennent des grid items à partir du moment où body est en display grid.
Modifié par Raphael (02 Dec 2022 - 16:58)
Bonjour Raphaël,

Ah non, les meta sont dans le head, quand même.

Il y a un warning PHP mais sans influence sur la mise en page je suppose.

Rétrécis la largeur de la page avec vue sur le bas du tableau des prix.

Le texte Note, Descriptif, est bloqué par la largeur du tableau au lieu d'être fluide.

Idem quand tu passes en version mobile, où accessoirement le tableau est supposé être flexible (Display FLEX pour les tr)..
Modérateur
Bonjour,

Quand un warning php est inclus dans la page avant le <!DOCTYPE html>, ça peut conduire parfois à des résultats inattendus (même si ici ce n'est peut-être pas le cas). C'est une mauvaise pratique. Le <!DOCTYPE html> doit être en tout premier dans la page.

Amicalement,
Modifié par parsimonhi (02 Dec 2022 - 18:48)
Raphael a écrit :
Si tu veux que ta colonne puisse se rétrécir, la bonne valeur est minmax(0, 1fr). C'est une valeur beaucoup plus sûre que "1fr" d'ailleurs.

Oui, j'ai remarqué que 1fr est différemment interprété entre Chrome et Firefox si pas de valeur min par défaut : pour Chrome il y aura au minimum la largeur d'une gouttière, pour Firefox la valeur sera de 0. Firefox semble mieux suivre les spec', mais du coup, dans tous les cas, il vaut mieux définir explicitement une valeur min.
Modifié par Olivier C (02 Dec 2022 - 18:50)
Modérateur
Bonjour,

Bon, je viens de faire un petit test vite fait en copiant le html et les feuilles de styles cf.css et f.css, et en retirant les balises générées par le warning php et qui se trouvent avant le <!doctype>. Ça a l'air de mieux marcher (mais comme je n'ai pas trop compris le problème initial, je ne sais pas si ça règle ce problème initial).

Amicalement,
Modifié par parsimonhi (02 Dec 2022 - 19:01)
Encore merci de votre suivi.

parsimonhi a écrit :

Quand un warning php est inclus dans la page avant le &lt;!DOCTYPE html&gt;, ça peut conduire parfois à des résultats inattendus (même si ici ce n'est peut-être pas le cas). C'est une mauvaise pratique. Le &lt;!DOCTYPE html&gt; doit être en tout premier dans la page.


100 % d'accord mais c'est un site de test.
En production il n'y a pas de warning.
Dès que j'ai le temps je remplace ce lien par une page html sans le warning et avec les deux feuilles de style dans le head.

Olivier C a écrit :

Oui, j'ai remarqué que 1fr est différemment interprété entre Chrome et Firefox si pas de valeur min par défaut : pour Chrome il y aura au minimum la largeur d'une gouttière, pour Firefox la valeur sera de 0. Firefox semble mieux suivre les spec', mais du coup, dans tous les cas, il vaut mieux définir explicitement une valeur min.


C'est ce que j'ai fait, j'ai remplacé 1fr par min (0, 1fr).
Voilà le nouveau lien sans warning.

le problème est donc :
Tableau : il occupe la place de son contenu, Ok.
Texte sous le tableau : il doit être fluide et rester complet quelle que soit la largeur de la fenêtre.

upload/1670015616-58253-2022-12-02221208-.png
Modifié par boteha_2 (02 Dec 2022 - 22:15)
Modérateur
Salut,

Il faut enlever le justify-self: start; de #recherche . Me demande pas pourquoi ca doit lui donner je ne sais quel contexte j'ai pas le temps de creuser trop loin.

Bonne journée
Bonjour laurent,

C'est fait et le problème semble résolu, voir ce lien.

Je vais réfléchit un peu au pourquoi du comment avant de cocher Résolu.
Bonjour,

On a bien avancé mais il reste un problème.

overflow: hidden sur #recherche n'est pas ergonomique, il faut une barre de défilement horizontal pour voir la partie cachée.

J'ai enlevé cette propriété.
Bonne nouvelle, Chrome et Edge font exactement ce qu'il faut faire : texte fluide et barre de défilement horizontal..
Par contre Firefox affiche la barre de défilement mais bouffe le texte.

J'ai essayé overflow: scroll
Firefox rend alors le texte fluide mais sans afficher la barre de défilement.
Et trop bizarrement Chrome et Edge n'affichent plus de barre de défilement.horizontal, mais à, droite une barre grise verticale qui n'est pas une barre de défilement et doublonne avec la barre de la fenêtre...