L'application de css avec jQuery s'arrête <select> de montrer la liste déroulante

Donc j'ai quelques <select> étiquettes que je voudrais montrer tout le contenu dans IE. J'ai regardé autour et trouvé un few fixes, mais je ne veux pas inclure YUI puisque j'utilise déjà jQuery ailleurs, et préférerais garder les sélections sur la page au lieu de le remplacer par DIVs.L'application de css avec jQuery s'arrête <select> de montrer la liste déroulante

Dans le code que j'ai trouvé, FF3 fonctionne très bien. Dans Internet Explorer (6,7,8), le premier clic sur le <select> fait clignoter le menu déroulant puis disparaît. J'ai essayé focus et mousedown à la place de l'événement click dans le code, sans succès.

Si je supprime les deux paramètres de element.css dans autoWidth, les menus déroulants fonctionnent comme prévu, sans avoir la bonne largeur. Est-ce que quelqu'un sait ce qui causerait le réglage du CSS pour faire échouer le menu déroulant dans IE?

<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
var count = 0; 
autoWidth = function(e) { 
    $element = $(e.target) 
    $element.css("width","auto"); 
    if($element.width() < $element.data("originalWidth")) 
    { 
    $element.css("width", $element.data("originalCSSWidth")); 
    } 
} 
resetWidth = function(e) { 
    $element = $(e.target) 
    $element.css("width", $element.data("originalCSSWidth")); 
    $("#counter").text(++count); 
} 
recordEvent = function(e) { 
    $("#event").text($("#event").text() + " " + e.type); 
} 
dropDownIEWidthFix = function() { 
//if($.browser.msie) 
//{ 
    $dropDown = $(this); 
    $dropDown.data("originalWidth", $dropDown.width()); 
    $dropDown.data("originalCSSWidth", $dropDown.css("width")); 
    $dropDown.blur(recordEvent); 
    $dropDown.blur(resetWidth); 
    $dropDown.change(recordEvent); 
    $dropDown.change(resetWidth); 
    $dropDown.click(recordEvent); 
    $dropDown.click(autoWidth); 
//} 
}; 
$(function() { 
    $("select.officeItemList").each(dropDownIEWidthFix); 
}); 
function trackingSelectionChanged(select) 
{ 
    $("#event").text($("#event").text() + " inlineOnChange"); 
} 
</script> 
</head> 
<body> 
<div style="overflow:hidden;width:148px;"> 
    <select class="officeItemList" style="width:148px;" onchange="trackingSelectionChanged(this);"> 
    <option value="1">erasersdffffffffffeeefefsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfefesf</option> 
    <option value="3">pencil</option> 
    <option value="4">ruler</option> 
    <option value="5">ink</option> 
    <option value="7">A4 paper</option> 
    <option value="8">A3 paper</option> 
    <option value="9">erasersdffffffffffeeefefsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfefesf</option> 
    <option value="10">executive</option> 
    <option value="11">janitor</option> 
    <option value="12">developer</option> 
    </select> 
</div> 
<div style="overflow:hidden;width:160px;"> 
    <select class="officeItemList" style="width:160px;" onchange="trackingSelectionChanged(this);"> 
    <option value="3">pencil</option> 
    <option value="4">ruler</option> 
    <option value="5">ink</option> 
    <option value="7">A4 paper</option> 
    <option value="8">A3 paper</option> 
    <option value="9">erasersdffffffffffeeefefsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfefesf</option> 
    <option value="10">executive</option> 
    <option value="11">janitor</option> 
    <option value="12">developer</option> 
    </select> 
</div> 
<div style="overflow:hidden;width:160px;"> 
    <select class="officeItemList" style="width:160px;" onchange="trackingSelectionChanged(this);"> 
    <option value="1">eee</option> 
    <option value="3">pencil</option> 
    <option value="4">ruler</option> 
    <option value="5">ink</option> 
    <option value="7">A4 paper</option> 
    <option value="8">A3 paper</option> 
    <option value="9">ffff</option> 
    <option value="10">executive</option> 
    <option value="11">janitor</option> 
    </select> 
</div> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
AdjustWidth fired :<span id="counter"></span> times 
<div id="event"></div> 
</body>

Source

2009-10-07 s_hewitt

On dirait que le problème est avec le rendu d'IE des listes déroulantes. Si vous modifiez le css sur le <select>, le menu déroulant est réinitialisé (le scintillement lors du premier clic). Donc, l'utilisation de l'événement mousedown au lieu de click corrige les deux premières listes déroulantes, mais en raison de la réinitialisation supplémentaire sur la troisième liste déroulante (car elle est déjà assez importante) rompt l'événement de changement natif d'IE (la valeur déroulante jamais changements quelles que soient les options sur lesquelles vous cliquez).

Solution: Lors du chargement initial de la page - ne liez pas les événements si la liste déroulante est déjà suffisamment grande. J'ai changé la largeur en automatique, et mesuré le <select>, puis lier uniquement les événements de changement de largeur lorsque les listes déroulantes en ont besoin, vous pouvez éviter les événements aux autres listes déroulantes.

Voici l'IE 6,7,8 testé en code. FireFox fonctionne correctement pour commencer, même avec Safari. Vous pouvez voir une ligne commentée avec le correctif IE6, cette ligne, lorsqu'elle est supprimée, provoque le comportement (incorrect) d'origine dans IE6. Pour être honnête, je ne sais pas pourquoi.

<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
     <script type="text/javascript"> 
dropDownIEWidthFix = function() { 
if($.browser.msie) { 
    $dropDown = $(this); 
    $dropDown.data("originalWidth", $dropDown.width()); 
    $dropDown.data("originalCSSWidth", $dropDown.css("width")); 
    $dropDown.css("width", "auto"); 
    if($dropDown.width() > $dropDown.data("originalWidth")) { 
     $dropDown.blur(function(e) { 
      $element = $(e.target); 
      $element.css("width", $element.data("originalCSSWidth")); 
     }); 
     $dropDown.change(function(e) { 
      $element = $(e.target); 
      $element.css("width", $element.data("originalCSSWidth")); 
     }); 
     $dropDown.mousedown(function(e) { 
      $element = $(e.target); 
      $element.css("width","auto"); 
      $element.width(); //IE6 fix. 
     }); 
    } 
    $dropDown.css("width", $dropDown.data("originalCSSWidth")); 
}} 
$(function() { 
    $("select.officeItemList").each(dropDownIEWidthFix); 
}); 
function trackingSelectionChanged(select) 
{ 
} 
</script> 
</head> 
<body> 
    <div style="float: left; display: inline; width: 160px;"> 
     <div class="FUNCOptionTitle"> 
      <span style="text-align: right;">col1</span> 
     </div> 
     <div style="overflow:hidden;width:148px;"> 
      <select class="officeItemList" style="width:148px;" onchange="trackingSelectionChanged(this);"> 
       <option value="1">erasersdffffffffffeeefefsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfefesf</option> 
       <option value="3">pencil</option> 
       <option value="4">ruler</option> 
       <option value="5">ink</option> 
       <option value="7">A4 paper</option> 
       <option value="8">A3 paper</option> 
       <option value="9">erasersdffffffffffeeefefsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfefesf</option> 
       <option value="10">executive</option> 
       <option value="11">janitor</option> 
       <option value="12">developer</option> 
      </select> 
     </div> 
    </div> 
    <div style="float: left; display: inline; width: 165px;"> 
     <div class="FUNCOptionTitle"> 
      <span style="text-align: right;">col2</span> 
     </div> 
     <div style="overflow:hidden;width:160px;"> 
      <select class="officeItemList" style="width:160px;" onchange="trackingSelectionChanged(this);"> 
       <option value="3">pencil</option> 
       <option value="4">ruler</option> 
       <option value="5">ink</option> 
       <option value="7">A4 paper</option> 
       <option value="8">A3 paper</option> 
       <option value="9">erasersdffffffffffeeefefsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfsdfefesf</option> 
       <option value="10">executive</option> 
       <option value="11">janitor</option> 
       <option value="12">developer</option> 
      </select> 
     </div> 
    </div> 
    <div style="float: left; display: inline; width: 165px;"> 
     <div class="FUNCOptionTitle"> 
      <span style="text-align: right;">col3</span> 
      </div> 
     <div style="overflow:hidden;width:160px;"> 
      <select class="officeItemList" style="width:160px;" onchange="trackingSelectionChanged(this);"> 
       <option value="1">eee</option> 
       <option value="3">pencil</option> 
       <option value="4">ruler</option> 
       <option value="5">ink</option> 
       <option value="7">A4 paper</option> 
       <option value="8">A3 paper</option> 
       <option value="9">ffff</option> 
       <option value="10">executive</option> 
       <option value="11">janitor</option> 
      </select> 
     </div> 
    </div> 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
    AdjustWidth fired :<span id="counter"></span> times 
    <div id="event"></div> 
</body>

Source

2009-10-07 18:01:14

L'application de css avec jQuery s'arrête <select> de montrer la liste déroulante

Répondre

Questions connexes