Largeur de la liste déroulante dans IE

92

Dans IE, la liste déroulante prend la même largeur que la dropbox (j'espère avoir du sens) alors que dans Firefox, la largeur de la liste déroulante varie en fonction du contenu.

Cela signifie essentiellement que je dois m'assurer que la boîte de dépôt est suffisamment large pour afficher la sélection la plus longue possible. Cela rend ma page très moche :(

Existe-t-il une solution de contournement pour ce problème? Comment puis-je utiliser CSS pour définir différentes largeurs pour la boîte de dépôt et la liste déroulante?

javascript  html  internet-explorer  drop-down-menu 
— Nimesh Madhavan
source

Réponses:

102

Voici un autre exemple basé sur jQuery . Contrairement à toutes les autres réponses publiées ici, il prend en compte tous les événements du clavier et de la souris, en particulier les clics:

if (!$.support.leadingWhitespace) { // if IE6/7/8
    $('select.wide')
        .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
        .bind('click', function() { $(this).toggleClass('clicked'); })
        .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
        .bind('blur', function() { $(this).removeClass('expand clicked'); });
}

Utilisez-le en combinaison avec ce morceau de CSS:

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

Tout ce que vous avez à faire est d'ajouter la classe wideau (x) élément (s) de liste déroulante en question.

<select class="wide">
    ...
</select>

Voici un exemple de jsfiddle . J'espère que cela t'aides.

— BalusC
source
2
+1: De toutes les solutions proposées ici, cela a fonctionné le mieux pour moi. J'avais également besoin de faire des changements CSS et HTML pour que cela fonctionne pour mon cas. Tant de travail, pour quelque chose qui devrait fonctionner hors de la boîte.
— kgiannakakis
1
Fonctionne avec IE7 pas dans IE6 - Y a-t-il un ajustement pour cela pour IE6?
— DM du
4
@DMin: Désolé, nous ne prenons pas en charge les navigateurs anciens et obsolètes comme IE6.
— BalusC
3
@BalusC: :) Je sais que mon ami IE craint - néanmoins j'ai utilisé votre réponse, cela a fonctionné pour IE7 - a écrit un code séparé pour IE6 qui comprenait votre réponse + bind. ('Mouseenter' .. - a bien fonctionné - Merci de toute façon! :)
— DM le
3
En fonction de vos autres règles css - vous devrez peut-être ajouter! Important à la largeur ..width: auto !important;
— Tapirboy
14

Créer votre propre liste déroulante est plus pénible que cela ne vaut la peine. Vous pouvez utiliser du JavaScript pour faire fonctionner la liste déroulante IE.

Il utilise un peu de la bibliothèque YUI et une extension spéciale pour réparer les boîtes de sélection IE.

Vous devrez inclure les éléments suivants et envelopper vos <select>éléments dans un<span class="select-box">

Mettez-les avant la balise body de votre page:

<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript">
</script>
<script src="ie-select-width-fix.js" type="text/javascript">
</script>
<script>
// for each select box you want to affect, apply this:
var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' ); // s1 is the ID of the select box you want to affect
</script>

Modification de l'acceptation de la publication:

Vous pouvez également le faire sans la bibliothèque YUI et le contrôle Hack. Tout ce que vous avez vraiment à faire est de mettre un onmouseover = "this.style.width = 'auto'" onmouseout = "this.style.width = '100px'" (ou ce que vous voulez) sur l'élément select. Le contrôle YUI lui donne cette belle animation mais ce n'est pas nécessaire. Cette tâche peut également être accomplie avec jquery et d'autres bibliothèques (bien que je n'ai pas trouvé de documentation explicite pour cela)

- amendement à l'édition:
IE a un problème avec le onmouseout pour les contrôles de sélection (il ne considère pas que le survol de la souris sur les options est un survol de la souris sur la sélection). Cela rend l'utilisation d'une sortie de souris très délicate. La première solution est la meilleure que j'ai trouvée jusqu'à présent.

— Ninja de privation de sommeil
source
3
Je reçois un 404 sur ces deux liens
— Chris B
Le problème avec ce correctif est si vous avez des sélections dynamiques, par exemple dans une application de commerce électronique pour les attributs de produit. Vous n'allez jamais connaître les identifiants de toutes les
— listes
1
Les liens ne sont plus 404 mais montrent ce que je considère comme du spam malveillant. J'ai envisagé de voter à la baisse, mais je serai gentil et je me contenterai de le souligner.
— davur
12

vous pouvez simplement essayer ce qui suit ...

  styleClass="someStyleWidth"
  onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}" 
  onblur="this.style.position='';this.style.width=''"

J'ai essayé et ça marche pour moi. Rien d'autre n'est requis.

— Sai
source
1
Cool, je l'ai un peu amélioré (en utilisant des commentaires conditionnels pour la détection d'IE) et ajouté quelques commentaires, cela fonctionne très bien et pas de jQuery ou d'autres bibliothèques. Voir ici: jsbin.com/ubahe5/edit - plz MODIFIEZ votre réponse que JE VEUX VOUS DONNER +1, mais je ne peux pas parce que j'ai voté mal avant.
— Marco Demaio
9

J'ai utilisé la solution suivante et elle semble bien fonctionner dans la plupart des situations.

<style>
select{width:100px}
</style>

<html>
<select onmousedown="if($.browser.msie){this.style.position='absolute';this.style.width='auto'}" onblur="this.style.position='';this.style.width=''">
  <option>One</option>
  <option>Two - A long option that gets cut off in IE</option>
</select>
</html>

Remarque: le $ .browser.msie nécessite jquery.

— Justin Fisher
source
Pour tous ceux qui se sentent somnolents qui devraient être à la souris, pas à la souris - il m'a fallu quelques instants pour voir le problème
— shearichard
7

@Thad vous devez également ajouter un gestionnaire d'événements de flou

$(document).ready(function(){
    $("#dropdown").mousedown(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
    $("#dropdown").blur(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
});

Cependant, cela élargira toujours la boîte de sélection au clic, au lieu de seulement les éléments. (et cela semble échouer dans IE6, mais fonctionne parfaitement dans Chrome et IE7)

— Tinus
source
5

Il n'y a aucun moyen de le faire dans IE6 / IE7 / IE8. Le contrôle est dessiné par l'application et IE ne le dessine tout simplement pas de cette façon. Votre meilleur pari est d'implémenter votre propre liste déroulante via un simple HTML / CSS / JavaScript s'il est si important d'avoir la liste déroulante d'une largeur et la liste d'une autre largeur.

— Robert C. Barth
source
la solution est la suivante: utilisez javascript et css pour ajuster automatiquement la largeur au survol de la souris (et autres événements du clavier ...). lire ici: css-tricks.com/select-cuts-off-options-in-ie-fix la meilleure solution (moins invasive)
— tuffo19
5

Si vous utilisez jQuery, essayez ce plugin IE select width:

http://www.jainaewen.com/files/javascript/jquery/ie-select-style/

L'application de ce plugin donne l'impression que la boîte de sélection dans Internet Explorer fonctionne comme elle le ferait dans Firefox, Opera, etc. en permettant aux éléments d'option de s'ouvrir en pleine largeur sans perdre l'apparence et le style de la largeur fixe. Il ajoute également la prise en charge du remplissage et des bordures sur la zone de sélection dans Internet Explorer 6 et 7.

— Ewen
source
4

Dans jQuery, cela fonctionne assez bien. Supposons que la liste déroulante a id = "dropdown".

$(document).ready(function(){

    $("#dropdown").mousedown(function(){
    if($.browser.msie) {
        $(this).css("width","auto");
    }
    });
    $("#dropdown").change(function(){
    if ($.browser.msie) {
        $(this).css("width","175px");
    }
    });

});
— Eran Medan
source
3

Voici la solution la plus simple.

Avant de commencer, je dois vous dire que la boîte de sélection déroulante se développera automatiquement dans presque tous les navigateurs sauf IE6. Donc, je ferais une vérification du navigateur (c'est-à-dire IE6) et n'écrirais ce qui suit que dans ce navigateur. Voilà. Vérifiez d'abord le navigateur.

Le code élargit comme par magie la zone de sélection déroulante. Le seul problème avec la solution est que sur la souris, la liste déroulante sera étendue à 420px, et parce que le débordement = hidden, nous masquons la taille de la liste déroulante étendue et l'afficherons comme 170px; ainsi, la flèche sur le côté droit du ddl sera masquée et ne pourra pas être vue. mais la boîte de sélection sera étendue à 420px; c'est ce que nous voulons vraiment. Essayez simplement le code ci-dessous et utilisez-le si vous l'aimez.

.ctrDropDown
{
    width:420px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
    width:420px; <%-- this the width of the dropdown select box.--%>
}

<div style="width:170px; overflow:hidden;">
<asp:DropDownList runat="server" ID="ddlApplication" onmouseout = "this.className='ctrDropDown';" onmouseover ="this.className='ctrDropDownClick';" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';"></asp:DropDownList>
</div>

Ce qui précède est le CSS IE6. Le CSS commun pour tous les autres navigateurs doit être comme ci-dessous.

.ctrDropDown
{
    width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
    width:auto; <%-- this the width of the dropdown select box.--%>
}
— bluwater2001
source
2

si vous voulez un menu déroulant et / ou volant simple sans effets de transition, utilisez simplement CSS ... vous pouvez forcer IE6 à prendre en charge: survolez tous les éléments à l'aide d'un fichier .htc (css3hover?) avec un comportement (propriété IE6 uniquement) défini dans le fichier CSS attaché conditionnellement.

— came
source
2

Vérifiez ceci .. ce n'est pas parfait mais cela fonctionne et c'est pour IE seulement et n'affecte pas FF. J'ai utilisé le javascript normal pour onmousedown pour établir IE only fix .. mais le msie de jquery pourrait également être utilisé dans onmousedown .. l'idée principale est le "onchange" et le flou pour que la boîte de sélection revienne à la normale .. Décidez de votre propre largeur pour ceux-ci. J'avais besoin de 35%.

onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}" 
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"
— Lucien
source
2

La réponse de BalusC ci-dessus fonctionne très bien, mais il y a un petit correctif que j'ajouterais si le contenu de votre liste déroulante a une largeur plus petite que ce que vous définissez dans votre CSS select.expand, ajoutez ceci à la liaison mouseover:

.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
                                if ($(this).width() < 300) // put your desired minwidth here
                                {
                                    $(this).removeClass('expand');
                                }})
— jbabey
source
2

C'est quelque chose que j'ai fait en prenant des morceaux de trucs d'autres personnes.

        $(document).ready(function () {
        if (document.all) {

            $('#<%=cboDisability.ClientID %>').mousedown(function () {
                $('#<%=cboDisability.ClientID %>').css({ 'width': 'auto' });
            });

            $('#<%=cboDisability.ClientID %>').blur(function () {
                $(this).css({ 'width': '208px' });
            });

            $('#<%=cboDisability.ClientID %>').change(function () {
                $('#<%=cboDisability.ClientID %>').css({ 'width': '208px' });
            });

            $('#<%=cboEthnicity.ClientID %>').mousedown(function () {
                $('#<%=cboEthnicity.ClientID %>').css({ 'width': 'auto' });
            });

            $('#<%=cboEthnicity.ClientID %>').blur(function () {
                $(this).css({ 'width': '208px' });
            });

            $('#<%=cboEthnicity.ClientID %>').change(function () {
                $('#<%=cboEthnicity.ClientID %>').css({ 'width': '208px' });
            });

        }
    });

où cboEthnicity et cboDisability sont des listes déroulantes avec un texte d'option plus large que la largeur de la sélection elle-même.

Comme vous pouvez le voir, j'ai spécifié document.all car cela ne fonctionne que dans IE. De plus, j'ai enfermé les listes déroulantes dans des éléments div comme ceci:

<div id="dvEthnicity" style="width: 208px; overflow: hidden; position: relative; float: right;"><asp:DropDownList CssClass="select" ID="cboEthnicity" runat="server" DataTextField="description" DataValueField="id" Width="200px"></asp:DropDownList></div>

Cela prend en charge le déplacement des autres éléments lorsque votre liste déroulante se développe. Le seul inconvénient ici est que le visuel de la menuliste disparaît lorsque vous sélectionnez, mais revient dès que vous avez sélectionné.

J'espère que cela aide quelqu'un.

— Derrick
source
2

c'est la meilleure façon de procéder:

select:focus{
    min-width:165px;
    width:auto;
    z-index:9999999999;
    position:absolute;
}

c'est exactement la même chose que la solution BalusC. Seulement cela est plus facile. ;)

— mcmwhfy
source
J'ai retesté votre css, et cela fonctionne dans Chrome et un peu dans Firefox, mais pas dans IE8. (Peut-être que mon IE8 est une version différente?) Depuis, je suis venu avec ma propre solution basée sur js. Voir tahirhassan.blogspot.co.uk/2013/02/…
— Tahir Hassan
Jouer un peu dans IE8 avec ceci et un ajustement plus tard cela a aidé. Je devais juste mettre le parent <td> à une largeur fixe, repositionner la valeur supérieure et ¡ahí estuvo !. Merci
— j4v1
1

La solution de jquery BalusC a été améliorée par moi. Utilisé aussi: commentaire de Brad Robertson ici .

Mettez simplement ceci dans un .js, utilisez la classe large pour vos combos désirés et ne forgez pas pour lui donner un identifiant. Appelez la fonction dans le onload (ou documentReady ou autre).
Aussi simple que ça :)
Il utilisera la largeur que vous avez définie pour le combo comme longueur minimale.

function fixIeCombos() {
    if ($.browser.msie && $.browser.version < 9) {
    var style = $('<style>select.expand { width: auto; }</style>');
    $('html > head').append(style);

    var defaultWidth = "200";

    // get predefined combo's widths.
    var widths = new Array();
    $('select.wide').each(function() {
        var width = $(this).width();
        if (!width) {
        width = defaultWidth;
        }
        widths[$(this).attr('id')] = width;
    });

    $('select.wide')
    .bind('focus mouseover', function() {
        // We're going to do the expansion only if the resultant size is bigger
        // than the original size of the combo.
        // In order to find out the resultant size, we first clon the combo as
        // a hidden element, add to the dom, and then test the width.
        var originalWidth = widths[$(this).attr('id')];

        var $selectClone = $(this).clone();
        $selectClone.addClass('expand').hide();
        $(this).after( $selectClone );
        var expandedWidth = $selectClone.width()
        $selectClone.remove();
        if (expandedWidth > originalWidth) {
        $(this).addClass('expand').removeClass('clicked');
        }
    })
    .bind('click', function() {
        $(this).toggleClass('clicked'); 
    })
    .bind('mouseout', function() {
        if (!$(this).hasClass('clicked')) {
        $(this).removeClass('expand');
        }
    })
    .bind('blur', function() {
        $(this).removeClass('expand clicked');
    })
    }
}
— Federico Valido
source
0

Vous pouvez ajouter un style directement à l'élément de sélection:

<select name="foo" style="width: 200px">

Ainsi, cet élément sélectionné aura une largeur de 200 pixels.

Vous pouvez également appliquer une classe ou un identifiant à l'élément et le référencer dans une feuille de style

— Katy
source
0

Jusqu'à présent, il n'y en a pas. Je ne sais pas pour IE8, mais cela ne peut pas être fait dans IE6 et IE7, sauf si vous implémentez votre propre fonctionnalité de liste déroulante avec javascript. Il existe des exemples sur la façon de le faire sur le Web, bien que je ne vois pas beaucoup d'avantages à dupliquer les fonctionnalités existantes.

— pilsetnieks
source
0

Nous avons la même chose sur un asp: liste déroulante:

Dans Firefox (3.0.5), la liste déroulante correspond à la largeur de l'élément le plus long de la liste déroulante, soit 600 pixels de large ou quelque chose du genre.

0

Cela semble fonctionner avec IE6 et ne semble pas en briser les autres. L'autre chose intéressante est qu'il change le menu automatiquement dès que vous modifiez votre sélection déroulante.

$(document).ready(function(){
    $("#dropdown").mouseover(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $("#dropdown").trigger("mouseover");
        }
    });

});
— lhoess
source
0

Le lien hedgerwow (le contournement de l'animation YUI) dans la première meilleure réponse est rompu, je suppose que le domaine a expiré. J'ai copié le code avant qu'il n'expire, vous pouvez donc le trouver ici (le propriétaire du code peut me faire savoir si je viole les droits d'auteur en le téléversant à nouveau)

http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/

Dans le même article de blog, j'ai écrit sur la création d'un élément SELECT identique à celui normal en utilisant le menu Bouton YUI. Jetez un œil et faites-moi savoir si cela vous aide!

— Hammad Tariq
source
0

Basé sur la solution publiée par Sai , voici comment le faire avec jQuery.

$(document).ready(function() {
    if ($.browser.msie) $('select.wide')
        .bind('onmousedown', function() { $(this).css({position:'absolute',width:'auto'}); })
        .bind('blur', function() { $(this).css({position:'static',width:''}); });
});
— Ahmad Alfy
source
0

Je pensais jeter mon chapeau dans le ring. Je crée une application SaaS et j'avais un menu de sélection intégré dans un tableau. Cette méthode a fonctionné, mais elle a tout biaisé dans le tableau.

onmousedown="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}
onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}"

Donc, ce que j'ai fait pour améliorer tout cela a été de jeter le select dans un div z-indexé.

<td valign="top" style="width:225px; overflow:hidden;">
    <div style="position: absolute; z-index: 5;" onmousedown="var select = document.getElementById('select'); if(navigator.appName=='Microsoft Internet Explorer'){select.style.position='absolute';select.style.width='auto'}">
        <select name="select_name" id="select" style="width: 225px;" onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}" onChange="reportFormValues('filter_<?=$job_id?>','form_values')">
            <option value="0">All</option>
            <!--More Options-->
        </select>
    </div>
</td>
— n0nag0n
source
0

J'ai dû contourner ce problème et une fois est venu avec une solution assez complète et évolutive fonctionnant pour IE6, 7 et 8 (et compatible avec d'autres navigateurs évidemment). J'ai écrit tout un article à ce sujet ici: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer

Je pensais que je partagerais cela pour les personnes qui rencontrent toujours ce problème, car aucune des solutions ci-dessus ne fonctionne dans tous les cas (à mon avis).

— Aerendel
source
0

J'ai essayé toutes ces solutions et aucune n'a fonctionné complètement pour moi. C'est ce que j'ai trouvé

$(document).ready(function () {

var clicknum = 0;

$('.dropdown').click(
        function() {
            clicknum++;
            if (clicknum == 2) {
                clicknum = 0;
                $(this).css('position', '');
                $(this).css('width', '');
            }
        }).blur(
        function() {
            $(this).css('position', '');
            $(this).css('width', '');
            clicknum = 0;
        }).focus(
        function() {
            $(this).css('position', 'relative');
            $(this).css('width', 'auto');
        }).mousedown(
        function() {
            $(this).css('position', 'relative');
            $(this).css('width', 'auto');
        });
})(jQuery);

Assurez-vous d'ajouter une classe déroulante à chaque liste déroulante dans votre html

L'astuce ici consiste à utiliser la fonction de clic spécialisée (je l'ai trouvée ici Événement d'incendie chaque fois qu'un élément DropDownList est sélectionné avec jQuery ). La plupart des autres solutions ici utilisent le changement de gestionnaire d'événements, qui fonctionne bien mais ne se déclenchera pas si l'utilisateur sélectionne la même option que celle précédemment sélectionnée.

Comme beaucoup d'autres solutions, la mise au point et la descente de la souris concernent lorsque l'utilisateur met la liste déroulante au point, le flou est utilisé lorsqu'il clique.

Vous pouvez également utiliser une sorte de détection de navigateur pour que cela n'affecte que par exemple. Cela n'a pas l'air mal dans les autres navigateurs

— RasTheDestroyer
source
0

Il est testé dans toutes les versions d'IE, Chrome, FF et Safari

Code JavaScript:

<!-- begin hiding
function expandSELECT(sel) {
  sel.style.width = '';
}

function contractSELECT(sel) {
  sel.style.width = '100px';
}
// end hiding -->

Code HTML:

<select name="sideeffect" id="sideeffect"  style="width:100px;" onfocus="expandSELECT(this);" onblur="contractSELECT(this);" >
  <option value="0" selected="selected" readonly="readonly">Select</option>
  <option value="1" >Apple</option>
  <option value="2" >Orange + Banana + Grapes</option>
— Arif
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.