Dev Faq
7
votes

Limiter la largeur initiale de la liste de sélection

J'ai une liste de sélection, où certains clients ont entré des options de longue durée pour elles, ce qui enfreint la conception. Je me demande s'il existe un moyen de définir une largeur fixe sur le widget SELECT, mais que vous avez toujours le menu déroulant que cela produit soit toujours assez large pour afficher toute l'option.

0 commentaires

6 Réponses :

2
votes

Voir l'exemple de travail ici.

Il vous suffit d'appliquer largeur dans votre boîte de sélection en ligne ou en CSS. Il sera aussi large que vous avez spécifié mais lorsque vous avez cliqué, il affichera toutes les options de la largeur.

1 commentaires

Bonne idée, mais cela coupe la liste déroulante également dans Internet Explorer 6+

1
votes

Je ne sais pas si vous pouvez le faire avec CSS (Navigateur indépendant), mais voici 2 autres solutions:

1. Au lieu d'afficher "Veeeeeery looooooooooong teeeeeeeeeext" Vous pouvez afficher quelque chose comme "Veeeeery Loooo ...";

2. Construisez votre sélection à l'aide de DIV et des listes afin qu'il soit fermé pour avoir une largeur spécifique et lorsque vous appuyez sur quelque chose comme une flèche pour afficher la largeur complète. (Je ne suis pas sûr de comprendre ce que j'essaie de dire avec celui-ci ....).

0 commentaires
0
votes

Je ne sais pas si vous êtes ouvert à l'aide de JQuery du tout, mais j'utilise habituellement cette méthode:

http://css-tricks.com/select -Coupes-off-Options-in-IE-Fix /

est un peu agité mais semble mieux que de couper le contenu

0 commentaires
1
votes

Si la liste que vous avez (les entrées dans , mais une liste personnalisée construite avec, dites un

.

Ce n'est pas difficile, tout ce dont vous avez besoin est

un div contenant la valeur par défaut Option,
une div cachée avec toutes les options de
Lorsque l'utilisateur clique sur l'option par défaut, affichez la DIV cachée de
En cliquant sur les éléments de la DIV cachée (qui est maintenant visible), faites que l'élément sélectionné dans la première div

Peut-être déjà plugin jquery pour cela. Mais je ne suis pas sûr que vous soyez ouvert à JQuery, je ne suis pas un expert de JQuery.

Je connais cet effort comparativement plus que d'avoir un sélectionner , mais je pense que cela vaut la peine d'effort. Tous les hacks - Développez la div Onmouseover, OnClick, etc. N'essemblez pas bien, pourrait toujours casser votre conception et, en fonction de la quantité de données que l'utilisateur puisse entrer, ne serait toujours pas efficace.

Dans l'approche de la liste personnalisée, vous pouvez envelopper les éléments afin que vous soyez en contrôle complet.

0 commentaires
1
votes

Ajouter au CSS quelque chose comme ceci: XXX

Cela fonctionne pour moi. NOTE Il y a no points devant les ancres.

0 commentaires
3
votes

Étant donné que vous ne spécifiez pas ce que le support de navigateur dont vous avez besoin, cela peut ou non être une solution. Cela fonctionne dans la plupart des navigateurs IE9 + 

select {
    width: 100%;
    max-width: 150px;
}

1 commentaires

Pour Newbs comme moi, si vous mettez cette solution en ligne, c'est