Largeur de la liste déroulante dans IE
https://stackoverflow.com/questions/73960
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Dans IE, la liste déroulante prend la même largeur que la liste déroulante (j'espère que j'ai 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 liste déroulante 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 à ce problème? Comment utiliser CSS pour définir différentes largeurs pour la liste déroulante et la liste déroulante?
La solution
Voici un autre exemple fondé sur jQuery . Contrairement à toutes les autres réponses publiées ici, il prend en compte tous les événements liés au clavier et à la souris, notamment 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;
}
Il suffit d’ajouter la classe wide aux éléments de la liste déroulante en question.
<select class="wide">
...
</select>
Voici un exemple jsfiddle . J'espère que cela vous aidera.
Autres conseils
La création de votre propre liste déroulante est plus pénible qu’elle ne vaut la peine. Vous pouvez utiliser du JavaScript pour que le menu déroulant IE fonctionne.
Il utilise un peu de la bibliothèque YUI et une extension spéciale pour corriger les sélections IE.
Vous devrez inclure les éléments suivants et envelopper vos <select> éléments dans un <span class="select-box">
Placez-les devant 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 après acceptation:
Vous pouvez également le faire sans la bibliothèque YUI et le contrôle Hack. Tout ce que vous avez vraiment besoin de faire est de mettre 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’aie pas trouvé de documentation explicite à ce sujet)
- amendement à la modification:
IE a un problème avec onmouseout pour les contrôles de sélection (il ne considère pas le survol des options comme étant un survol de la sélection). Cela rend l'utilisation de la souris très délicate. La première solution est la meilleure que j'ai trouvée jusqu'à présent.
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.
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: $. browser.msie nécessite jquery.
@Vous avez également besoin d'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");
}
});
});
Toutefois, cela élargira la zone de sélection en cliquant, au lieu de simplement les éléments. (et cela semble échouer dans IE6, mais fonctionne parfaitement dans Chrome et IE7)
Il n’existe 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 HTML / CSS / JavaScript s’il est si important d’avoir la largeur d’une liste déroulante et la largeur d’une autre liste.
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 zone de sélection dans Internet Explorer fonctionne comme dans Firefox, Opera, etc. en permettant aux éléments d’option de s’ouvrir sur toute la largeur sans perdre l’aspect et le style de la largeur fixe. Il ajoute également la prise en charge du remplissage et des bordures dans la zone de sélection dans Internet Explorer 6 et 7.
Dans jQuery, cela fonctionne assez bien. Supposons que la liste déroulante ait id = & "; Liste déroulante &";
.$(document).ready(function(){
$("#dropdown").mousedown(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
});
Voici la solution la plus simple.
Avant de commencer, je dois vous dire que la liste de sélection déroulante s’étendra automatiquement dans presque tous les navigateurs sauf IE6. Donc, je voudrais faire une vérification du navigateur (c'est-à-dire, IE6) et écrire ce qui suit uniquement pour ce navigateur. Ici ça va. Commencez par vérifier le navigateur.
Le code étendra comme par magie la liste de sélection déroulante. Le seul problème avec la solution est onmouseover la liste déroulante sera étendue à 420px, et parce que le débordement = masqué, nous masquons la taille de la liste déroulante étendue et nous la présentons sous la forme 170px; ainsi, la flèche à droite du ddl sera cachée et ne pourra pas être vue. mais la zone 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 à tous les autres navigateurs devrait ê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.--%>
}
si vous voulez un menu déroulant & amp; / ou flyout sans effets de transition, utilisez simplement CSS ... vous pouvez forcer IE6 à supporter: survolez tous les éléments en utilisant un fichier .htc (css3hover?) avec un comportement (Propriété IE6 uniquement) définie dans le fichier CSS attaché de manière conditionnelle.
vérifiez ceci .. ce n’est pas parfait mais cela fonctionne et c’est pour IE uniquement et n’affecte pas le FF. J'ai utilisé le javascript habituel pour onmousedown pour établir IE uniquement .. mais le msie de jQuery pourrait également être utilisé dans onmousedown. L'idée principale est le & "Onchange &"; et sur flou pour que la zone de sélection revienne à la normale ... décidez que vous avez votre propre largeur pour ceux-là. 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%'"
La réponse de BalusC ci-dessus fonctionne très bien, mais il y a une petite solution que je voudrais ajouter si le contenu de votre liste déroulante a une largeur inférieure à celle que vous définissez dans votre CSS select.expand, ajoutez-le à la souris:
.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
if ($(this).width() < 300) // put your desired minwidth here
{
$(this).removeClass('expand');
}})
C’est quelque chose que j’ai fait en prenant des bits dans les affaires 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 menus déroulants avec un texte d’option plus large que la largeur de la sélection elle-même.
Comme vous pouvez le constater, j’ai spécifié document.all car cela ne fonctionne que dans IE. En outre, j'ai inséré les listes déroulantes dans des éléments div tels que:
<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>
Ceci prend en charge le déplacement des autres éléments lorsque votre liste déroulante se développe. Le seul inconvénient est que le visuel de la ménuliste disparaît lorsque vous sélectionnez, mais revient dès que vous avez sélectionné.
J'espère que cela aide quelqu'un.
c'est le meilleur moyen de le faire:
select:focus{
min-width:165px;
width:auto;
z-index:9999999999;
position:absolute;
}
c'est exactement la même chose que la solution BalusC. Seulement c'est plus facile. ;)
Un plugin complet jQuery est disponible. Il prend en charge les interactions de présentation et de clavier sans faille. Consultez la page de démonstration: http://powerkiki.github.com/ ie_expand_select_width /
disclaimer: J'ai codé cette chose, les correctifs sont les bienvenus
La solution de jquery BalusC a été améliorée par moi. Utilisé également: commenter ici de Brad Robertson.
Il suffit de mettre ceci dans un fichier .js, d’utiliser la classe wide pour les combinaisons désirées et de ne pas forger pour lui attribuer un identifiant. Appelez la fonction onload (ou documentReady ou autre).
Aussi simple cul que :)
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');
})
}
}
Vous pouvez ajouter un style directement à l'élément select:
<select name="foo" style="width: 200px">
Cet élément sélectionné aura donc 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
Jusqu'à présent, il n'y en a pas. Je ne connais pas IE8, mais cela ne peut pas être fait dans IE6 & Amp; 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 voie pas grand avantage à la duplication de fonctionnalités existantes.
Nous avons la même chose sur un asp: dropdownlist:
Dans Firefox (3.0.5), la liste déroulante correspond à la largeur de l'élément le plus long dans la liste déroulante, soit 600 pixels de large ou quelque chose du genre.
Cela semble fonctionner avec IE6 et ne semble pas en casser d'autres. L’autre avantage est que le menu est modifié automatiquement dès que vous modifiez la liste déroulante.
$(document).ready(function(){
$("#dropdown").mouseover(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$("#dropdown").trigger("mouseover");
}
});
});
Le lien hedgerwow (solution d’animation 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 son expiration pour que vous puissiez le trouver ici (le propriétaire du code peut me faire savoir si je ne respecte pas les droits d'auteur en le téléchargeant à nouveau)
Sur le même article de blog, j’ai écrit à propos de la création d’un élément SELECT identique à celui qui est normal à l’aide du menu Bouton YUI. Jetez un coup d'oeil et laissez-moi savoir si cela aide!
Sur la base de la solution publiée par Sai , voici comment procéder. 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:''}); });
});
Je pensais que je lancerais mon chapeau dans le ring. Je crée une application SaaS et un menu de sélection est intégré dans un tableau. Cette méthode a fonctionné, mais elle a faussé tout 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 la situation, c’est de jeter la sélection dans un div indexé par z.
<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>
Son testé dans toutes les versions de IE, Chrome, FF & amp; Safari
// code JavaScript
<script type="text/javascript">
<!-- begin hiding
function expandSELECT(sel) {
sel.style.width = '';
}
function contractSELECT(sel) {
sel.style.width = '100px';
}
// end hiding -->
</script>
// 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>
J'ai dû contourner ce problème et je suis parvenu à proposer 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 même: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer
Je pensais partager cela pour les personnes qui rencontrent encore ce problème, car aucune des solutions ci-dessus ne fonctionne dans tous les cas (à mon avis).
J'ai essayé toutes ces solutions et aucune n’a fonctionné complètement pour moi. C'est ce que je suis venu avec
$(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 de liste déroulante à chaque liste déroulante de votre code HTML
.L’astuce consiste ici à utiliser la fonction de clic spécialisée (je l’ai trouvée ici Déclenche un événement chaque fois qu'un élément DropDownList est sélectionné avec jQuery ). La plupart des autres solutions proposées ici utilisent la modification du gestionnaire d'événements, qui fonctionne correctement mais ne se déclenche pas si l'utilisateur sélectionne la même option que celle sélectionnée précédemment.
Comme beaucoup d’autres solutions, la focalisation et le survol de souris s’appliquent lorsque l’utilisateur place la liste déroulante au premier plan, tandis que le flou correspond à leur clic.
Vous pouvez également vouloir y insérer une sorte de détection de navigateur afin que seuls les effets soient atteints. Cela ne semble pas mauvais dans les autres navigateurs, cependant
