55 votes

aaandre avatar

Sélection d'une liste déroulante à largeur fixe dont le contenu est coupé dans IE

Demandé el 25 de Mars, 2009
Quand la question a-t-elle été
121549 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

La question :

Certains des éléments de la sélection nécessitent une largeur supérieure à la largeur spécifiée de 145px afin de s'afficher entièrement.

Comportement de Firefox : un clic sur la sélection fait apparaître la liste déroulante des éléments ajustée à la largeur de l'élément le plus long.

Comportement d'IE6 et d'IE7 : en cliquant sur la sélection, la liste déroulante des éléments est limitée à une largeur de 145px, ce qui rend impossible la lecture des éléments les plus longs.

L'interface utilisateur actuelle nous oblige à faire tenir cette liste déroulante dans 145px et à lui faire accueillir des éléments dont la description est plus longue.

Des conseils pour résoudre le problème avec IE ?

L'élément supérieur doit conserver une largeur de 145px, même lorsque la liste est développée.

Merci !

Le css :

select.center_pull {
    background:#eeeeee none repeat scroll 0 0;
    border:1px solid #7E7E7E;
    color:#333333;
    font-size:12px;
    margin-bottom:4px;
    margin-right:4px;
    margin-top:4px;
    width:145px;
}

Voici le code de saisie de la sélection (il n'y a pas de définition pour le style backend_dropbox pour le moment)

<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>

Page html complète au cas où vous voudriez tester rapidement dans un navigateur :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dropdown test</title>

<style type="text/css">
<!--
select.center_pull {
    background:#eeeeee none repeat scroll 0 0;
    border:1px solid #7E7E7E;
    color:#333333;
    font-size:12px;
    margin-bottom:4px;
    margin-right:4px;
    margin-top:4px;
    width:145px;
}
-->
</style>
</head>

<body>
<p>Select width test</p>
<form id="form1" name="form1" method="post" action="">
<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
</form>
</body>
</html>
Demandé el 25 de Mars, 2009 par aaandre

Réponses

Trop de publicités?

29voto

rusty avatar
rusty Points 219

Pour IE 8, il existe une solution simple, purement basée sur les css :

select:focus {
    width: auto;
    position: relative;
}

(Vous devez définir la propriété position, si la boîte de sélection est l'enfant d'un conteneur à largeur fixe).

Malheureusement, IE 7 et moins ne prennent pas en charge le sélecteur :focus.

Répondu el 22 de Décembre, 2010 par rusty (219 Points )

10voto

Anoop Sharma avatar
Anoop Sharma Points 193

J'ai fait des recherches sur Google à ce sujet, mais je n'ai pas trouvé de solution optimale. J'ai donc créé une solution qui fonctionne bien dans tous les navigateurs.

il suffit d'appeler la fonction badFixSelectBoxDataWidthIE() au chargement de la page.

function badFixSelectBoxDataWidthIE(){
    if ($.browser.msie){
      $('select').each(function(){
    if($(this).attr('multiple')== false){
      $(this)
          .mousedown(function(){
               if($(this).css("width") != "auto") {
                   var width = $(this).width();
                   $(this).data("origWidth", $(this).css("width"))
                          .css("width", "auto");
                   /* if the width is now less than before then undo */
                   if($(this).width() < width) {
        $(this).unbind('mousedown');
                       $(this).css("width", $(this).data("origWidth"));
                   }
               }
           })
           /* Handle blur if the user does not change the value */
           .blur(function(){
               $(this).css("width", $(this).data("origWidth"));

           })
           /* Handle change of the user does change the value */
           .change(function(){
               $(this).css("width", $(this).data("origWidth"));

           });
        }
      });
    }
    }
Répondu el 30 de Décembre, 2010 par Anoop Sharma (193 Points )

7voto

Zac avatar
Zac Points 3135

Voici un petit script qui devrait vous aider :

http://www.icant.co.uk/forreview/tamingselect/

Répondu el 25 de Mars, 2009 par Zac (3135 Points )

7voto

islander avatar
islander Points 71

Pour une solution simple sans Javascript, l'ajout d'un attribut de titre à vos <option> contenant le texte pourrait suffire, en fonction de vos besoins.

<option value="242" title="Very long and extensively descriptive text">
  Very long and extensively descriptive text
</option>

Cela permettra d'afficher le texte coupé à la manière d'une info-bulle au survol de la <option>, quelle que soit la largeur de la <sélection>.

Fonctionne pour IE7+.

Répondu el 10 de Février, 2011 par islander (71 Points )

3voto

stukerr avatar
stukerr Points 348

J'ai bien peur qu'il ne soit pas exempt de javascript, mais j'ai réussi à le rendre assez petit en utilisant jQuery.

$('#del_select').mouseenter(function () {

    $(this).css("width","auto");

});

$('#del_select').mouseout(function () {

    $(this).css("width","170px");

});
Répondu el 17 de Juillet, 2009 par stukerr (348 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X