Suivi — Sondages bug sur la longueur des barres dans les sondages

#421 Posté par  . État de l’entrée : corrigée. Assigné à Bruno Michel.
Étiquettes : aucune
1
14
avr.
2011

sur une ligne d'une réponse, nous avons :
<meter max="100" min="0" style="width:13,9%;" value="13.9">307</meter>

ne devrions nous pas avoir :
<meter max="100" min="0" style="width: 100%;" value="13.9">307</meter>

car la sinon la barre de fond s'affiche toute petite ... et on a donc un affichage qui représente 13,9% de 13,9% donc c'est tout petit et illisible.

  • # lapin compris

    Posté par  (site web personnel) . Évalué à 2 (+0/-0).

    Je n'ai pas compris l'explication. Pourquoi aurions-nous une taille qui ferait 13,9% de 13,9% ?

    • [^] # Re: lapin compris

      Posté par  (site web personnel) . Évalué à 1 (+0/-0).

      En fait certains navigateurs gèrent eux même le rendu des <meter>. Par exemple FF3.6 ne s'en charge pas. Chrome s'en charge et il affiche une barre qui représente le 100% et dans la barre une partie est colorée pour représenter ce qu'il y a dans "value".

      Une page avec des exemples : http://peter.sh/examples/?/html/meter-progress.html A tester avec différents navigateurs.

      Donc pour un navigateur qui gère le <meter> la barre colorée censée représenter la valeur fait en effet "13,9% de 13,9%" dans l'exemple de Christophe. Pour interpréter le sondage il faut donc se baser sur la largeur du <meter>. Laisser la valeur à 0 ou 100 pourrait permettre d'éviter la confusion, non ?

      • [^] # Re: lapin compris

        Posté par  . Évalué à 1 (+0/-0).

        voila ... et c'est pareil sur chrome 10 et sur firefox 3.6 pour le rendu ... en gros la barre est toute rikiki alors qu'elle devrait faire la largeur ...

      • [^] # Re: lapin compris

        Posté par  (site web personnel) . Évalué à 2 (+0/-0).

        Merci pour l'explication.

        Quand j'avais mis ça en place, aucun navigateur ne faisait de rendu particulier pour <meter>, et je pensais que c'était toujours le cas. Je vais donc regarder comment corriger ça.

        • [^] # Re: lapin compris

          Posté par  . Évalué à 0 (+0/-0).

          sur chrome 10 et firefox 3.5 ou 3.6 (linux et windows) si tu mets width=100% ça fonctionne ...

          • [^] # Re: lapin compris

            Posté par  (site web personnel) . Évalué à 3 (+0/-0).

            Bah non, sous firefox 3.5 / 3.6 / 4.0, si je mets width=100%, toutes les barres ont la même taille.

            • [^] # Re: lapin compris

              Posté par  . Évalué à 1 (+0/-0).

              oui la barre générale qui représente 100% a la même taille et c'est plutôt normal ...
              mais les barres vertes à l'intérieur qui représentent le % de vote pour cet item
              sont elles à la bonne taille du coup ...

              et je viens de me rendre compte que je ne t'ai pas expliqué le contexte où je voyais ça !
              c'est quand le sondage est sur la partie gauche de l'interface, en dessous du logo et de
              l'espace utilisateur ... j'ai une capture écran d'ailleurs si tu veux.

              ah ben tient d'ailleurs, je viens de me rendre compte aussi que ça a changé, il n'y a plus
              la barre verte qui représentait le nombre de vote mais directement le nombre de votes
              d'écrit ... du coup effectivement la taille de barre représentant le % convient bien ...

              • [^] # Re: lapin compris

                Posté par  (site web personnel) . Évalué à 2 (+0/-0).

                Avec width=100%, les barres vertes à l'intérieur font effectivement la bonne taille, mais juste sous Chrome. Firefox 3.5 / 3.6 / 4.0 ne gère pas la balise <meter> et du coup, n'affiche que la barre grise avec toujours la même taille.

  • # Corrigé

    Posté par  (site web personnel) . Évalué à 2 (+0/-0).

    J'ai viré les attributs min et max, ce qui permet d'afficher ça à peu près correctement partout.

    Cf https://github.com/nono/linuxfr.org/commit/20e47fd634437b5d4d91004a122e3f3593c0ca01

Envoyer un commentaire

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.