[Résolu] Amélioration de la présentation d'une liste d'options

Bonsoir à tous

Je cherche à faire la chose suivante:

    <select name="option">
        <option>-------- choisir dans la liste --------</option>
        <option value="value1">Texte complet de value1</option>
        <option value="value2">Texte complet de value2</option>
        <option value="value3">Texte complet de value3</option>
    </select>

Ce code est généré par un script Javascript à partir de données fournies par un programme php.
Selon les cas, la longueur des "Textes complets" peut beaucoup varier.

Comme on le sait, la largeur de la zone dans laquelle on affiche la valeur est calculée par le navigateur en fonction de la longueur (en pixel) du texte le plus long à afficher dans cette zone.
Comme la valeur par défaut "-------- choisir dans la liste -------" est celle qui s'affiche tant qu'on n'a rien choisi, de texte apparait à gauche dans une case bien trop grande pour ce texte.
Je cherche un moyen simple pour que ce texte occupe de façon "harmonieuse" la zone en cause.
Je n'ai pas trouvé pour l'instant de meilleure solution que de choisir une police de largeur fixe et d'ajouter des "-" à gauche et à droite du texte "choisir dans la liste" pour avoir une longueur égale à celle du texte le plus long.
Par contre si je veux une police de largeur variable, il ne suffit pas de compter le nombre de caractères, il faut trouver la largeur en pixel correspondante.
J'ai déjà fait ça dans un autre script, ça passe par une div dissimulée dans laquelle je mets le texte et je demande la largeur en pixels...
Quelqu'un aurait il une idée moins basique pour résoudre ce petit problème, du genre CSS aux petits oignons?
Modifié par PapyJP (05 Feb 2015 - 18:57)

Bonsoir,

Une solution peut par exemple consister à mettre en forme l'élément select au moyen de JS.
> un exemple de script disponible sur Github

Re–,

Tu as aussi celui-ci, qui n'utilise pas jQuery et qui semble assez respectueux de l'accessibilité => http://mikemaccana.github.io/styleselect/

@audrasjb
Merci pour tes réponses, mais je ne vois pas comment elles correspondent à mes besoins.
J'essaie de mieux expliquer:
1) j'ai des options de taille variable, mais généralement assez longues, genre

<select>
            <option>-- choisir dans la liste--</option>
            <option value="option1">Association des mangeurs de choucroute</option>
            <option value="option2">Association des mangeurs de jambon</option>
            <option value="option3">Association des mangeurs de saucisses</option>
            <option value="option4">Association des buveurs de schnaps</option>
        </select>

2) je veux sur la première ligne mettre un texte du genre "-- choisir dans la liste--"
3) si je ne style pas la largeur de la balise "select", ce qui s'affiche à l'origine est le texte "-- choisir dans la liste--" cadré à gauche dans une boite dont la longueur est celle (en pixel) de la plus longue des options; je trouve cela très laid
4) si je style la largeur à celle du texte "-- choisir dans la liste--", c'est correct au démarrage, mais quand l'utilisateur a choisi une option on ne voit que le début du texte."Association des mangeu..."

La question est: que recommandez vous de faire en pratique? sachant que le select est généré en JS.

Ce à quoi j'ai pensé, c'est ajouter des "-" de part et d'autre de "-- choisir dans la liste--" de façon à élargir le texte par défaut à la largeur du texte le plus long.
Mais pour savoir combien il faut en mettre, si je me contente de prendre la longueur de la chaine de caractères en caractères, il faut impérativement que la police soit de largeur fixe.

Par contre si je veux garder une police de largeur non fixe, il faut calculer la longueur de chaque texte, non plus en caractères mais en pixels. La seule façon que je connaisse de faire cela est d'utiliser une div "cachée", y mettre le texte et demander sa taille au navigateur.

Toute suggestion est bienvenue
Modifié par PapyJP (06 Feb 2015 - 00:15)

@Magic Carpet
Merci de ta réponse. J'ai essayé à peu près tout ça, sans trouver un résultat qui me satisfasse. J'espérais que quelqu'un aurait déjà rencontré ce problème et trouvé une solution.
Jusqu'à présent, quand j'avais un select, ou bien il y avait une option par défaut ou bien la longueur des textes était plus courte, et le texte "-- choisir une option --" était en fait le plus long.
Je pense que je vais réutiliser mon arsenal à calculer les largeurs de texte en pixels.

Bonjour,
Je débute, aussi je donne cette solution sous réserves...
Il est possible d'insérer un formulaire dans un tableau (paramétrable) ce qui donne à peu près ceci :

<table width="200" border="2" cellpadding="2" cellspacing="4">
  <tr>
    <td><label>Nom</label></td>
    <td><input name="Nom" type="text" id="nom" onFocus="value=' ';" value="Votre nom" size="30" maxlength="30"></td>
  </tr>
<br>
  <tr>
    <td><label>Prénom</label></td>
    <td><input name="Prenom" type="text" onFocus="value=' ';" value="Votre prénom (ou zézette épouse X)" size="30" maxlength="30"></td>
  </tr>

MagicCarpet a écrit :
Je pense à un truc (oui, ça m'arrive), tu dis ne pas connaitre la longueur de tes textes, ok.

Par contre, je constate dans ton code d'exemple qu'ils commencent tous par : "Association des mangeurs", alors pourquoi ne pas faire un label pour présenter le select qui contiendrais ce texte et dans la liste tu pourrais mettre la suite ? (supprimer les premières lettres "Association des mangeurs" avec la méthode JS slice ou équivalent ? et ne garder que choucroute, jambon, saucisses et schnap).

Je suis peut-être complètement à côté de la plaque, ton texte n'est peut-être qu'un exemple ?

Tu as raison, mon texte n'est qu'un exemple de texte long et en restant dans l'atmosphère humoristique de ce site alsacien.
En fait il y a des textes divers, dont la liste peut varier au cours de la vie du nouveau site que je fabrique, et ces noms sont parfois similaires, d'où la nécessite de tout afficher pour bien distinguer les valeurs.

Philippe-Jacques a écrit :
Bonjour,
Je débute, aussi je donne cette solution sous réserves...
Il est possible d'insérer un formulaire dans un tableau (paramétrable) ce qui donne à peu près ceci :
...

Oui, certes, et alors?
Le problème vient des "select" dont la largeur est soit imposée par le style (et alors si j'ai un texte trop long il ne s'affiche pas complètement), soit calculé par le navigateur (ce que je veux faire) mais je voudrais que mon texte par défaut soit correctement présenté, ce qui n'est pas le cas.
Modifié par PapyJP (06 Feb 2015 - 12:20)

Bon, comme personne ne m'a donné la solution miracle, j'ai stylé le select avec text-align:center;

Ce n'est pas génial, mais c'est la moins mauvaise des solutions que j'ai essayées sans faire appel à l'artillerie du calcul de largeur de textes en pixels.

a beh oui, tout simplement

La solution du tableau est absolument à proscrire, ça n'a aucun sens, à tout point de vue.

Salut...

je suis pas sur d'avoir bien compris le problème mais cette solution doit faire ce que tu cherches à faire

<select name="option" style="width:80px">
        <option>choisir</option>
        <option value="value1">Texte complet de value1</option>
        <option value="value2">Texte complet de value2</option>
        <option value="value3">Texte complet de value3</option>
    </select>

le fait de définir un width réduit la taille du select pour la première entrée... masi pas pour les autres au survol...

donc là on voit bien juste la largeur de "choisir" et ensuite le select propose les options de manière intégrale...

mais je suis pas sur d'avoir bien bien compris

Salut,

A mon avis ce n'est pas exactement ce qu'il veut. Ce qu'il veut c'est que quand on choisisse une option, elle soit affichée dans son intégralité et pas croppé par la largeur du select.

Perso, je me limiterai à un text-align: center. Pour un contrôle plus fin faudra passer par Javascript. Je pense pas que ce soit nécessaire pour ce genre de comportement visuel qui te dérange plus que ce qu'il ne dérangera l'utilisateur final.
Modifié par Gili (06 Feb 2015 - 15:44)

ALors pour ce genre de comportement il faut du JS... là j'utilise du jquery

<script>
		function changeWidth(zeId){
			$("#"+zeId).width($("#"+zeId+" :selected").text().length+"em");
		}
	</script>
	<select name="option" style="width:80px" id="tochange" onChange="changeWidth('tochange')">
        <option>choisir</option>
        <option value="value1">Texte complet</option>
        <option value="value2">Texte complet de value2</option>
        <option value="value3">Texte complet de value plus grande</option>
    </select>

c'est améliorable j epense masi du coup ça fait ce que veux papy

ça change la taile du select selon ce qui est sélectionné

pchlj a écrit :
Salut...

je suis pas sur d'avoir bien compris le problème mais cette solution doit faire ce que tu cherches à faire
.......
le fait de définir un width réduit la taille du select pour la première entrée... mais pas pour les autres au survol...

donc là on voit bien juste la largeur de "choisir" et ensuite le select propose les options de manière intégrale...

mais je suis pas sur d'avoir bien bien compris

Il propose bien les options en largeur intégrale, mais une fois l'option choisie, on revient à lataille de 80px, et donc ce qui s'affiche n'est que le début du texte l'option choisie, ce qui ne m'arrange pas car les informations intéressantes se trouvent à la fin.

Sauf que...

<select style=text-align:center;>

ne semble fonctionner que sous FireFox, mais pas avec Safari, Chrome et IE...