Im IE hat die Dropdown-Liste dieselbe Breite wie die Dropbox (ich hoffe, ich mache Sinn), während in Firefox die Breite der Dropdown-Liste je nach Inhalt variiert.
Dies bedeutet im Grunde, dass ich sicherstellen muss, dass die Dropbox breit genug ist, um die längste mögliche Auswahl anzuzeigen. Dadurch sieht meine Seite sehr hässlich aus :(
Gibt es eine Problemumgehung für dieses Problem? Wie kann ich mit CSS unterschiedliche Breiten für Dropbox und Dropdown-Liste festlegen?
Antworten:
Hier ist ein weiteres jQuery- basiertes Beispiel. Im Gegensatz zu allen anderen hier veröffentlichten Antworten werden alle Tastatur- und Mausereignisse berücksichtigt, insbesondere Klicks:
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'); });
}Verwenden Sie es in Kombination mit diesem Stück CSS:
select {
width: 150px; /* Or whatever width you want. */
}
select.expand {
width: auto;
}Sie müssen widelediglich die Klasse zu den betreffenden Dropdown-Elementen hinzufügen .
<select class="wide">
...
</select>Hier ist ein jsfiddle-Beispiel . Hoffe das hilft.
width: auto !important;
Das Erstellen einer eigenen Dropdown-Liste ist mehr ein Schmerz als es wert ist. Sie können JavaScript verwenden, damit das IE-Dropdown-Menü funktioniert.
Es verwendet einen Teil der YUI-Bibliothek und eine spezielle Erweiterung zum Korrigieren von IE-Auswahlfeldern.
Sie müssen Folgendes einschließen und Ihre <select>Elemente in a einschließen<span class="select-box">
Stellen Sie diese vor das Body-Tag Ihrer Seite:
<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>Nach der Annahme bearbeiten:
Sie können dies auch ohne die YUI-Bibliothek und das Hack-Steuerelement tun. Alles, was Sie wirklich tun müssen, ist ein onmouseover = "this.style.width = 'auto'" onmouseout = "this.style.width = '100px'" (oder was auch immer Sie wollen) auf das select-Element zu setzen. Das YUI-Steuerelement gibt ihm diese nette Animation, aber es ist nicht notwendig. Diese Aufgabe kann auch mit jquery und anderen Bibliotheken ausgeführt werden (obwohl ich hierfür keine explizite Dokumentation gefunden habe).
- Änderung der Bearbeitung:
IE hat ein Problem mit dem Onmouseout für ausgewählte Steuerelemente (Mouseover für Optionen wird nicht als Mouseover für die Auswahl betrachtet). Dies macht die Verwendung eines Mouseouts sehr schwierig. Die erste Lösung ist die beste, die ich bisher gefunden habe.
Sie könnten einfach Folgendes versuchen ...
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=''"Ich habe es versucht und es funktioniert bei mir. Sonst ist nichts erforderlich.
Ich habe die folgende Lösung verwendet und sie scheint in den meisten Situationen gut zu funktionieren.
<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>Hinweis: Für die Datei $ .browser.msie ist eine Abfrage erforderlich.
@Das müssen Sie auch einen Unschärfe-Ereignishandler hinzufügen
$(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");
}
});
});Dadurch wird jedoch das Auswahlfeld beim Klicken weiterhin erweitert, anstatt nur die Elemente. (und es scheint in IE6 zu scheitern, funktioniert aber perfekt in Chrome und IE7)
In IE6 / IE7 / IE8 ist dies nicht möglich. Das Steuerelement wird von der App gezeichnet und der IE zeichnet es einfach nicht so. Am besten implementieren Sie Ihr eigenes Dropdown-Menü über einfaches HTML / CSS / JavaScript, wenn es so wichtig ist, dass das Dropdown-Menü eine Breite und die Liste eine andere Breite hat.
Wenn Sie jQuery verwenden, probieren Sie dieses IE Select Plugin Plugin aus:
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/
Durch Anwenden dieses Plugins scheint das Auswahlfeld in Internet Explorer so zu funktionieren, wie es in Firefox, Opera usw. funktionieren würde, indem die Optionselemente in voller Breite geöffnet werden können, ohne das Aussehen und den Stil der festen Breite zu verlieren. Außerdem wird das Auswahlfeld in Internet Explorer 6 und 7 mit Unterstützung für Auffüllen und Rahmen versehen.
In jQuery funktioniert dies ziemlich gut. Angenommen, das Dropdown hat 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");
}
});
});Hier ist die einfachste Lösung.
Bevor ich anfange, muss ich Ihnen sagen, dass das Dropdown-Auswahlfeld in fast allen Browsern außer IE6 automatisch erweitert wird. Also würde ich eine Browserprüfung durchführen (dh IE6) und das Folgende nur in diesen Browser schreiben. Hier kommt's. Überprüfen Sie zuerst den Browser.
Der Code erweitert das Dropdown-Auswahlfeld auf magische Weise. Das einzige Problem mit der Lösung besteht darin, dass das Dropdown-Menü bei Mauszeiger auf 420 Pixel erweitert wird. Da der Überlauf = ausgeblendet ist, wird die erweiterte Dropdown-Größe ausgeblendet und als 170 Pixel angezeigt. Daher wird der Pfeil auf der rechten Seite der DDL ausgeblendet und kann nicht gesehen werden. Das Auswahlfeld wird jedoch auf 420px erweitert. Das ist es, was wir wirklich wollen. Probieren Sie einfach den folgenden Code aus und verwenden Sie ihn, wenn Sie ihn mögen.
.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>Das obige ist das IE6 CSS. Das gemeinsame CSS für alle anderen Browser sollte wie folgt sein.
.ctrDropDown
{
width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:auto; <%-- this the width of the dropdown select box.--%>
}Wenn Sie ein einfaches Dropdown- und / oder Flyout-Menü ohne Übergangseffekte wünschen, verwenden Sie einfach CSS ... Sie können die Unterstützung von IE6 erzwingen: Bewegen Sie den Mauszeiger über alle Elemente mithilfe einer .htc-Datei (css3hover?) mit dem in definierten Verhalten (nur IE6-Eigenschaft) die bedingt angehängte CSS-Datei.
Probieren Sie es aus. Es ist nicht perfekt, aber es funktioniert und es ist nur für den Internet Explorer und hat keinen Einfluss auf FF. Ich habe das reguläre Javascript für onmousedown verwendet, um nur IE-Fix zu etablieren. Aber die msie von jquery kann auch in onmousedown verwendet werden. Die Hauptidee ist "onchange" und on blur, damit das Auswahlfeld wieder normal wird. Entscheide, dass du für diese eigene Breite bist. Ich brauchte 35%.
onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}"
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"Die obige Antwort von BalusC funktioniert hervorragend, aber es gibt eine kleine Korrektur, die ich hinzufügen würde, wenn der Inhalt Ihres Dropdowns eine geringere Breite als die in Ihrem CSS select.expand definierte hat. Fügen Sie dies der Mouseover-Bindung hinzu:
.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
if ($(this).width() < 300) // put your desired minwidth here
{
$(this).removeClass('expand');
}})Dies ist etwas, was ich getan habe, um anderen Leuten etwas abzunehmen.
$(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' });
});
}
});Dabei sind cboEthnicity und cboDisability Dropdowns mit Optionstext, der breiter als die Breite der Auswahl selbst ist.
Wie Sie sehen können, habe ich document.all angegeben, da dies nur im IE funktioniert. Außerdem habe ich die Dropdowns in div-Elementen wie folgt eingeschlossen:
<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>Dies sorgt dafür, dass die anderen Elemente beim Erweitern Ihres Dropdowns nicht mehr richtig platziert werden. Der einzige Nachteil hierbei ist, dass die Menulistenanzeige bei der Auswahl verschwindet, aber zurückkehrt, sobald Sie ausgewählt haben.
Hoffe das hilft jemandem.
Dies ist der beste Weg, dies zu tun:
select:focus{
min-width:165px;
width:auto;
z-index:9999999999;
position:absolute;
}Es ist genau das gleiche wie bei der BalusC-Lösung. Nur das ist einfacher. ;)
Ein vollwertiges jQuery-Plugin ist verfügbar. Es unterstützt unterbrechungsfreie Layout- und Tastaturinteraktionen. Weitere Informationen finden Sie auf der Demoseite: http://powerkiki.github.com/ie_expand_select_width/
Haftungsausschluss: Ich habe das Ding codiert, Patches sind willkommen
Die Lösung von jquery BalusC wurde von mir verbessert. Wird auch verwendet: Brad Robertsons Kommentar hier .
Fügen Sie dies einfach in eine .js-Datei ein, verwenden Sie die breite Klasse für Ihre gewünschten Combos und geben Sie ihr keine ID. Rufen Sie die Funktion im Onload (oder documentReady oder was auch immer) auf.
So einfach ist das :)
Es wird die Breite, die Sie für die Combo definiert haben, als minimale Länge verwenden.
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');
})
}
}Bisher gibt es keinen. Sie kennen IE8 nicht, können es jedoch nicht in IE6 und IE7 ausführen, es sei denn, Sie implementieren Ihre eigene Dropdown-Listenfunktion mit Javascript. Es gibt Beispiele, wie dies im Web gemacht wird, obwohl ich keinen großen Vorteil darin sehe, vorhandene Funktionen zu duplizieren.
Wir haben das gleiche auf einer asp: Dropdown-Liste:
In Firefox (3.0.5) ist die Dropdown-Liste die Breite des längsten Elements in der Dropdown-Liste, die etwa 600 Pixel breit ist oder so ähnlich.
Dies scheint mit IE6 zu funktionieren und andere nicht zu beschädigen. Die andere nette Sache ist, dass es das Menü automatisch ändert, sobald Sie Ihre Dropdown-Auswahl ändern.
$(document).ready(function(){
$("#dropdown").mouseover(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$("#dropdown").trigger("mouseover");
}
});
});Der Hedgerwow-Link (die Umgehung der YUI-Animation) in der ersten besten Antwort ist defekt. Ich denke, die Domain ist abgelaufen. Ich habe den Code kopiert, bevor er abgelaufen ist, sodass Sie ihn hier finden können (der Inhaber des Codes kann mich informieren, wenn ich gegen Urheberrechte verstoße, indem ich ihn erneut hochlade).
Im selben Blog-Beitrag schrieb ich über das Erstellen eines exakt gleichen SELECT-Elements wie das normale Element mithilfe des YUI-Schaltflächenmenüs. Schauen Sie mal rein und lassen Sie mich wissen, ob das hilft!
Basierend auf der von Sai veröffentlichten Lösung wird dies mit jQuery so gemacht.
$(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:''}); });
});Ich dachte, ich würde meinen Hut in den Ring werfen. Ich mache eine SaaS-Anwendung und habe ein Auswahlmenü in eine Tabelle eingebettet. Diese Methode hat funktioniert, aber alles in der Tabelle verzerrt.
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';}"Was ich getan habe, um alles besser zu machen, war, die Auswahl in ein Z-indiziertes Div zu werfen.
<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>Es ist in allen Versionen von IE, Chrome, FF & Safari getestet
// JavaScript-Code
<script type="text/javascript">
<!-- begin hiding
function expandSELECT(sel) {
sel.style.width = '';
}
function contractSELECT(sel) {
sel.style.width = '100px';
}
// end hiding -->
</script>// HTML Quelltext
<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>Ich musste dieses Problem umgehen und hatte einmal eine ziemlich vollständige und skalierbare Lösung für IE6, 7 und 8 (und natürlich kompatibel mit anderen Browsern). Ich habe hier einen ganzen Artikel darüber geschrieben: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer
Ich dachte, ich würde dies für Leute teilen, die immer noch auf dieses Problem stoßen, da keine der oben genannten Lösungen in jedem Fall funktioniert (meiner Meinung nach).
Ich habe alle diese Lösungen ausprobiert und keine hat vollständig für mich funktioniert. Das habe ich mir ausgedacht
$(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);Stellen Sie sicher, dass Sie jedem Dropdown-Menü in Ihrem HTML-Code eine Dropdown-Klasse hinzufügen
Der Trick hier ist die Verwendung der speziellen Klickfunktion (ich habe sie hier gefunden. Jedes Mal, wenn ein DropDownList-Element mit jQuery ausgewählt wird, wird ein Ereignis ausgelöst ). Viele der anderen hier beschriebenen Lösungen verwenden die Änderung des Ereignishandlers, die gut funktioniert, jedoch nicht ausgelöst wird, wenn der Benutzer dieselbe Option wie zuvor auswählt.
Wie bei vielen anderen Lösungen ist Fokus und Mousedown für den Fall gedacht, dass der Benutzer das Dropdown-Menü in den Fokus stellt. Unschärfe gilt für den Fall, dass er wegklickt.
Möglicherweise möchten Sie auch eine Art Browsererkennung darin einfügen, damit dies nur Auswirkungen hat, z. In anderen Browsern sieht es allerdings nicht schlecht aus