2010-08-05 8 views
0

Je souhaite dimensionner une liste de sélection en fonction de la largeur nécessaire pour l'index (chaîne) sélectionné. Dites par exemple que j'ai une liste avec 3 chaînes, court, moyen, loooooong; Je ne veux pas que la liste de sélection soit automatiquement aussi large que son plus grand élément, elle devrait plutôt être aussi large que l'élément sélectionné.Taille dynamique d'une liste de sélection (Safari)

La première méthode que j'ai essayé: document.getElementById('selectList').style.width = (selectedText.length * 6) + 'px'; où selectedText est une chaîne et 6 une mauvaise estimation de la largeur d'un caractère. Sans une police à espacement fixe, cela ne fonctionne pas correctement.

La méthode suivante j'ai essayé était de régler le innerHTML d'un div hors écran (en haut: -9999px) à l'index sélectionné puis: document.getElementById('selectList').style.width = document.getElementById('hiddenDiv').offsetWidth; Le problème avec cette méthode est que la largeur était pas non plus correct, certains vraiment les chaînes longues ont rendu la liste de sélection longue à comparer à la chaîne sélectionnée.

Des idées sur comment je peux dimensionner dynamiquement cette liste de sélection en fonction de la largeur/longueur de la chaîne?

+0

Voulez-vous que l'élément pour modifier sa largeur, ce qui signifie tout à droite sur la même ligne va sauter autour, ou tout simplement la partie déroulante? –

Répondre

1

Vous pouvez avoir une plage masquée remplie avec la valeur d'option sélectionnée en cas de modification, saisir sa largeur, puis définir la liste de sélection sur cette largeur.

Demo

+0

Je viens de réaliser que j'ai utilisé jQuery pour la démo et vous n'avez fait aucune mention de jQuery dans la question. Donc, si vous utilisiez jQuery, il y a une façon de le faire :) – cnanney

+0

Si vous convertissez réellement votre méthode en javascript, cela ne fonctionne pas. jQuery fait un peu de magie pour que cela fonctionne, et après avoir regardé la source de jQuery, je n'ai pas pu vérifier comment ça se passait. Vous ne pouvez pas obtenir la largeur CSS d'un span caché en javascript, je pense que vous devez obtenir son clientHeight. – sgarman

Questions connexes