HTML, Sélectionnez options largeur est recadrée dans IE. Toutes les solutions?

Cela semble bien fonctionner dans le forçant à-dire à réévaluer la choisir la largeur. Fonctionne dans IE7 et IE8.

if (jQuery.browser.msie) {
    jQuery("#" + selectID).css("width", "100%").css('width', 'auto');
}

OriginalL'auteur peter

J'aime 26design de la solution, mais il a 2 défauts:

1. Dans certaines circonstances, il est possible de tirer de l'événement mouseover deux fois résultant dans la origWidth variable à "auto" prévention de l'sélectionnez jamais revenir à la taille originale.

2. Si les valeurs de texte dans la liste déroulante, n'ont pas besoin de l'espace supplémentaire, puis sélectionnez se rapetisse qui semble étrange.

Cette version résout ces deux problèmes:

if($.browser.msie) {
    /* IE obscures the option text for fixed-width selects if the text 
     * is longer than the select. To work around this we make the width 
     * auto whenever the drop down is visible.
     */
    $("select.fixed-width").livequery(function(){
        /* Use mousedown rather than focus because the focus event gets 
         * interrupted and the dropdown does not appear 
         */
        $(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).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"));

        });
    });
}

Testé dans IE6-8

OriginalL'auteur Simon Dyson

OK, donc voici la solution que j'ai trouvé au bout d'un certain temps. Il va automatiquement augmenter la taille de la zone de sélection basée sur la largeur maximale de l'enfant options.

<script type="text/javascript">
  window.onload = function()
  {
    var elem = document.getElementById('test');
    var values = elem.length;
    var biggest_value = 0;
    var biggest_option = '';

    for(var i = 0; i <= values; i++)
    {
      if (elem.options[i])
      {
        var len = elem.options[i].value.length;
      }

      if (biggest_value < len)
      {
        biggest_value = len;
        biggest_option = elem.options[i];
      }
    }

    document.getElementById('test').style.width = biggest_option.offsetWidth + 'px';

};
</script>

La Boîte De Sélection:

<select id="test">
 <option value="Hello">Hello</option>
 <option value="Hello Again">Hello Again</option>
 <option value="Hello Yet Again">Hello Yet Again</option>
</select>

OriginalL'auteur Sarfraz

J'ai une solution qui fonctionne pour moi, alors j'ai pensé aller de l'avant et de le poster (avec quelques mises en garde au fond). Ce n'est pas l'utilisation la plus efficace de jQuery, j'en suis sûr, mais ça fonctionne comme je le souhaite de travailler. En gros, j'ai une liste de fuseaux horaires qui sont (évidemment) plutôt long des chaînes de texte.

<!--[if IE]>
<script type="text/javascript">
    $(document).ready(function() {
        $("select.timeZone")
        .mouseover(function() {
            $(this)
                .data("origWidth", $(this).css("width"))
                .css("width", "auto")
                .focus();
        })
        .mouseout(function() {
            $(this)
                .blur(function() {
                    $(this).css("width", $(this).data("origWidth"));
                })
                .change(function() {
                    $(this).css("width", $(this).data("origWidth"));
                })
        });
    });
</script>
<![endif]-->

Description:

• De manière conditionnelle pour IE uniquement pour les navigateurs.
• Cette solution est une version modifiée d'un script fourni par Chris Coyier (http://css-tricks.com/select-cuts-off-options-in-ie-fix/).
• Aussi, cette solution suppose que vous, comme moi, ne vous inquiétez pas vraiment IE6 tellement. La fonctionnalité de base est là, les navigateurs IE6 peut encore voir la plupart de l'sélectionnez options, soumettez le formulaire, etc., mais je ne peux pas perdre plus de temps à essayer de l'apaiser, ce petit sous-groupe.

Mises en garde:

• La liste de sélection a une largeur fixe avant d'être concentré.
• Onmouseout, la liste doit être floue ou modifiés avant la taille est à l'origine de largeur fixe. La raison j'ai fait en sorte de la liste de sélection a été floue ou changé d'abord, c'est parce qu'auparavant, onmouseout aurait le feu éteint dès que votre souris à gauche de la boîte de sélection (ce qui signifie que vous pourriez essayer et choisir une option, mais ils disparaissent avant que vous puissiez vous cliquez sur l'une).
• A l'inverse, sur la souris, l'accent est mis assurez-vous que le flou de l'événement est déclenché correctement.

OriginalL'auteur 26design

for (i=1;i<=5;i++){
       idname = "Usert" + i;
       document.getElementById(idname).style.width = "100%";

}

J'ai utilisé de cette façon ont montré de la liste déroulante, lorsque la largeur est pas montré correctement.

- Il travailler pour IE6, Firefox et Chrome.

OriginalL'auteur keong

La meilleure solution décrite ici: http://www.dougboude.com/blog/1/2008/05/Viewing-Option-Text-in-IE7-thats-Wider-than-the-Select-List.cfm

OriginalL'auteur Stud Muffler