Comment garder la largeur de SELECT Element petite mais les OPTIONS flexibles

Problème:

Ma liste déroulante est chargée dynamicment et certaines options sont assez longues, ce qui gâche ma mise en page. J’aimerais que la taille de l’élément select soit petite mais que, une fois développée, permette à l’utilisateur de voir toutes les options longues. Pour ce faire, j’ai défini la width du SELECT sur une valeur fixe, par exemple width:200px;

Comportement attendu / souhaité (Fonctionne dans Chrome)

entrez la description de l'image ici Comportement réel dans IE8

entrez la description de l'image ici

Ce que j’ai essayé

 select{ overflow:show; } option{ overflow:show; width:1000px; } 

FILLD SIMPLIFIÉ:

http://jsfiddle.net/gCbhq/2/

D’accord. Pas sûr que cela aide. J’utilise Jquery Mobile et mon bouton de sélection ne contient qu’une icône (= 28 pixels). Sur IE8 toutes mes options d’où 28px, aussi.

Je l’ai corrigé avec ceci:

 select { min-width: 150px !important; } 

mais cela ne fonctionne que parce que Jquery Mobile masque la sélection et ajoute ses propres éléments “au-dessus”.

Hélas, voici un correctif – http://css-sortingcks.com/select-cuts-off-options-in-ie-fix/

Tout ce que vous pouvez faire pour cela, c’est de le bidouiller pour qu’il soit proche. Le comportement de Chrome ne peut pas être imité simplement en ajoutant / modifiant CSS de la select seule.

C’est aussi proche que possible sans append d’autres éléments:

http://css-sortingcks.com/examples/SelectCutoffFix/ (cliquez sur retour à l’article en haut pour les détails de mise en œuvre)

La solution ci-dessus est ce que vous pouvez faire de mieux avec ce que vous demandez, c’est-à-dire sans aucun élément supplémentaire sur la select .

Si vous êtes prêt à append une div avec un peu de style autour de la select (aucun widget de remplacement ou d’interface utilisateur spéciale), vous pouvez le rendre un peu meilleur:

http://www.getharvest.com/blog/wp-content/uploads/2009/12/select_box_demo.html

(détails ici: http://www.getharvest.com/blog/2009/12/dropdown-problems-on-internet-explorer/ )

Cette solution est à peu près aussi proche que possible de ce que vous recherchez. Cela étant dit, c’est un bidouillage et quelques problèmes:

  • Si vous sélectionnez la même option deux fois de suite, le comportement attendu ne se déclenche que lorsque le focus quitte la select
  • lorsque la select est ouverte, le bouton de la flèche vers le bas disparaît (car le débordement est masqué par le div qui l’entoure)

Les solutions ci-dessus vous rapprocheront un peu plus, mais ni l’une ni l’autre n’a l’air aussi raffinée que je le souhaiterais. Si vous ne parvenez pas à append quoi que ce soit à la page, ce seront vos meilleures options (sur la base d’innombrables heures de recherche dans le passé). Ouais, ça craint, mais nous sums tous dans le même bateau.

Bonne chance!

Il n’existe pas de solution exacte, mais vous pouvez donner à ce petit hacker html et css l’atteinte de votre objective. HTML

 

CSS

 .divWrapper{ width:150px; overflow:hidden; } .selectBox{ width:150px; } .selectBox:focus{ width:auto; } 

Ici, nous encapsulons la boîte de sélection avec un div dont la largeur doit être égale à celle de la boîte de sélection div. Et sur le focus de la zone de sélection le rendant à nouveau en largeur automatique.

si vous pouvez vouloir utiliser jquery, utilisez jquery portion. Il redimensionnera la largeur de la zone de sélection comme vous l’avez définie lorsque vous sélectionnez une option. Découvrez-le sur http://jsfiddle.net/sudhanshu414/5NEWc/2/

Voici ce que j’utilise comme une solution css pure à ce problème. Si vous vous concentrez sur la sélection en appuyant sur un autre élément de la page, je simplement indexe la sélection: focus. Vous pouvez également définir la largeur de focus: select sur auto si vous le souhaitez, cela fonctionnera toujours.

       

Si vous supprimez la classe “couverture” et stylisez simplement la sélection, celle-ci sera également redimensionnée à la mise au point. de sorte que vous avez des options quant à la façon dont vous voulez l’afficher.

cela a été testé dans la dernière version de chrome, firefox et IE

Je ne peux pas reproduire le comportement mais vous pouvez essayer en css ceci:

 select:focus{width:auto !important;} 

Mais vous pouvez également consulter JQuery-UI .

[EDIT-1-]: J’ai essayé de reproduire le comportement inattendu d’IE. En 7/8/9, je ne vois pas le problème. Peut-être que vous travaillez avec un très vieux IE? Essayez d’exécuter une mise à jour pour la version 8 si cela est possible.

Ce que vous voulez faire va loin. Je ne pense pas que vous puissiez accéder aux enfants en modifiant leur apparence et en gardant le SELECT-parent à une taille normale. Vous auriez besoin de découpler les deux éléments. Vous pouvez essayer d’implémenter votre propre solution pour une liste déroulante, mais comme cela semble être le comportement normal d’autres navigateurs comme les autres éditions d’IE, Chrome, etc., cela pourrait être une perte de temps.

 $(document).ready(function(){ $('select').click( function () { //Try to alter the css here - but I'm not sure if this could work. }); 

[EDIT-2-]: Un menu de sélection pour JQuery-UI est prévu. Mais si vous envisagez d’autres plug-ins JQuery, vous pouvez utiliser dropkick.js ou consulter cette liste .

Ne pas aller avec CSS seul dans IE, car c’est plus ou moins un widget-OS que vous voulez styler.

Essayez une selectBox, qui utilise JavaScript pour insérer du HTML et du JavaScript pour imiter le comportement de select mais avec d’autres balises HTML.

https://github.com/revsystems/jQuery-SelectBox ou ici
http://www.bulgaria-web-developers.com/projects/javascript/selectbox/