Lors de l'utilisation de la balise de sélection de largeur fixe, il existe un bogue dans IE. Lorsque le contenu de l'option dans la balise de sélection est supérieur à la largeur de la balise de sélection, masquer. Son fonctionnement bien dans le feu renard, pas dans IE.Comment afficher l'option étendue dans la liste de sélection?
alt text http://img691.imageshack.us/img691/4530/dropdown.gif
C'est un bug dans IE, et il n'y a aucun moyen de le résoudre, en dehors de faire la boîte de sélection plus large:
<select style="width: 500px;">
<option value="1">
This is a very long option, but it's cool, cause the select is also very long
</option>
</select>
Une autre alternative est d'utiliser un cadre qui remplacera la selectbox avec une combinaison stylisée d'autres éléments. Ils se comporteront comme une selectbox, mais nécessiteront javascript pour fonctionner.
Ce n'est pas un bug, c'est une fonctionnalité. – epascarello
lol classique .... +1 –
Oui, une fonction obsolète !!! – htm11h
Je ne l'ai jamais essayé, mais vous pouvez essayer de définir le champ de saisie
position: absolute
et par exemple
width: 500
onFocus, et le ramener à la normale onBlur. Vous devrez peut-être modifier légèrement votre mise en page afin qu'elle ne bouge pas, mais je ne vois pas pourquoi cela ne devrait pas fonctionner.
La solution que j'ai trouvée (que je n'ai trouvée nulle part dans tous mes googling) était très simple: lorsqu'un utilisateur clique sur la liste de sélection, permutez la classe à une sans restriction de largeur. Quand ils font une sélection, retournez la classe à une avec des restrictions de largeur.
Voici un exemple utilisant jquery.
$(function() {
$(".SecuritySelect")
.mouseover(function(){
$(this)
.data("origWidth", $(this).css("width"))
.css("width", "auto");
})
.mouseout(function(){
$(this).css("width", $(this).data("origWidth"));
});
});
Vous devriez probablement faire quelque chose avec un positionnement fixe et tel, car cela va refaire la page. –
D'accord, c'est un peu un hack –
Vous pouvez le mettre dans un div avec débordement: caché, a là l'une des réponses de http://stackoverflow.com/questions/586718/recommendations-for-dropdown-menu -les-choses-qui-sont-trop-larges, ce qui vous amène à http://www.dougboude.com/blog/1/2008/05/Viewing-Option-Text-in-IE7-thats-Wider-than-the -Select-List.cfm. – techpeace
Hedgerwow a une excellente solution à ce problème:
http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/bk/demo.php
Il tombe dans un menu DHTML vraiment lisse, mais le fait très proprement. Correctif solide
Les solutions listées sont de mauvaise qualité. Un j'ai trouvé et utilisé était
$('select#CourtId')
.focus(function() { $('select#CourtId').css('position', 'relative').css('margin-right', '-300px').css('min-width', $('select#CourtId').css('width')).css('width', 'auto'); })
.blur(function() { $('select#CourtId').removeAttr('style'); });
Il y a un projet sur GitHub pour cela comme un plugin jQuery: http://css-tricks.com/select-cuts-off-options-in-ie-fix/
utiliser simplement comme:
$(document).ready(function() {
//all select lists expand to full width when selected
$("select").ieExpandSelectWidth();
});
Ajouter un commentaire si je n'oublie pas revenir ici. Pour autant que je sache, il n'y a pas de solution pour cela - mais peut-être que quelqu'un sait quelque chose. –
Ah. Je viens de découvrir le bouton "favori". :) –