Dropdown Breite in IE
https://stackoverflow.com/questions/73960
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
In IE, die Dropdown-Liste nimmt die gleiche Breite wie die Dropbox (ich hoffe, dass ich Sinn mache), während in Firefox die Breite der Dropdown-Liste variiert je nach Inhalt.
Das bedeutet im Wesentlichen, dass ich dafür sorgen, dass die Dropbox breit genug ist, um die längste Auswahl möglich angezeigt werden soll. Das macht meine Seite sieht sehr hässlich: (
Gibt es für dieses Problem jede Abhilfe? Wie kann ich CSS unterschiedliche Breiten für Dropbox und der Dropdownlist setzen?
Lösung
Hier ist ein anderes jQuery basierend Beispiel. Im Gegensatz zu allen anderen Antworten hier gepostet, dauert es alle Tastatur- und Maus-Ereignisse zu berücksichtigen, insbesondere klickt:
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;
}
Alles, was Sie tun müssen, ist die Klasse wide auf das Drop-down-Element (e) in Frage hinzuzufügen.
<select class="wide">
...
</select>
Hier ist ein Beispiel jsfiddle . Hoffe, das hilft.
Andere Tipps
Ihre eigenen Dropdown-Liste zu erstellen ist mehr Schmerz als es wert ist. Sie können einige JavaScript verwenden, um die IE Drop-Down-Arbeit zu machen.
Es verwendet ein wenig von der YUI-Bibliothek und eine spezielle Erweiterung für die Befestigung IE-Boxen wählen.
Sie müssen die folgenden Angaben enthalten und wickeln Sie Ihre <select> Elemente in einem <span class="select-box">
Setzen Sie diese vor dem 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 Annahme bearbeiten:
Sie können dies auch tun, ohne die YUI-Bibliothek und Hack Kontrolle. onmouseout = „this.style.width =‚100px‘“ (oder was auch immer Sie möchten) auf dem select-Elemente Alles, was Sie wirklich tun müssen, ist eine Onmouseover = „this.style.width =‚auto‘“ setzen. Die YUI Kontrolle gibt es diese schöne Animation, aber es ist nicht notwendig. Diese Aufgabe kann auch mit jQuery und anderen Bibliotheken erreicht wird
(obwohl, habe ich nicht explizit Dokumentation zu diesem) - Änderung des edit:
IE hat ein Problem mit dem Onmouseout für ausgewählte Kontrollen (es ist nicht der Mouseover auf Optionen ein Mouseover auf der Auswahl sind). Dies macht eine mouseout sehr schwierig werden. Die erste Lösung ist die beste, die ich bisher gefunden habe.
Sie könnten nur versuchen, die folgende ...
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 versucht, und es funktioniert für mich. Nichts anderes ist erforderlich.
Ich habe die folgende Lösung, und es 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:.. Die $ browser.msie erfordert jquery
@Thad Sie benötigen eine Unschärfe Event-Handler als auch 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");
}
});
});
Dies wird jedoch nach wie vor die Auswahlbox auf Klick erweitern, anstatt nur die Elemente. (Und es scheint, in IE6 zu scheitern, aber funktioniert perfekt in Chrome und IE7)
Es gibt keine Möglichkeit, es in IE6 / IE7 / IE8 zu tun. Die Steuerung wird von der App gezogen und IE einfach ist es nicht auf diese Weise zu ziehen. Ihre beste Wette ist Ihre eigene Drop-down über einfache HTML / CSS / JavaScript zu implementieren, wenn es das ist, wichtig, die in der Dropdown-eine Breite zu haben, und die Liste eine andere Breite.
Wenn Sie jQuery verwenden dann versuchen, diese IE wählen Breite plugin:
http://www.jainaewen.com/files/javascript / jquery / ie-select-style /
Dieses Plugin Anwendung macht das Auswahlfeld in Internet Explorer erscheinen arbeiten, wie es in Firefox, Opera usw., indem man die Option Elemente ohne dabei das Aussehen und den Stil der festen Breite bei voller Breite öffnen funktionieren würde. Es fügt auch Unterstützung für Polsterung und grenzt an das Auswahlfeld in Internet Explorer 6 und 7.
In jQuery funktioniert dies recht gut. Angenommen, die Drop-Down-id = "Dropdown" hat.
$(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 beginne, muss ich Ihnen sagen, Auswahlbox Dropdown werden automatisch erweitern fast alle Browser außer IE6. Also, ich würde den Browsercheck tun (das heißt, IE6) und schreiben Sie die folgenden nur für diesen Browser. Hier kommt's. Prüfen Sie zuerst für den Browser.
Der Code wird auf magische Weise das Dropdown-Auswahlfeld erweitert. Das einzige Problem mit der Lösung ist Onmouseover das Dropdown wird 420px erweitert werden, und weil der Überlauf = hidden wir die erweiterten Drop-Down-Größe versteckt und es als 170px zeigen; so wird der Pfeil auf der rechten Seite des DDL versteckt sein und nicht gesehen werden kann. aber das Auswahlfeld wird auf 420px erweitert werden; das ist, was wir wirklich wollen. Versuchen Sie einfach den Code für sich selbst und verwenden Sie es, wenn Sie es 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 oben ist die IE6 CSS. Die gemeinsame CSS für alle anderen Browser sollte wie unten 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 Drop-Down & / oder Flyout-Menü ohne Übergangseffekte wollen nur CSS ... Sie IE6 zwingen können, zu unterstützen: schweben auf alle Elemente eine .htc Datei (? Css3hover) mit Verhalten (IE6 nur Eigentum in der bedingt angebracht CSS-Datei definiert).
check this out .. es ist nicht perfekt, aber es funktioniert und es ist für nur IE und wirkt sich nicht auf FF. Ich benutzte die regelmäßige Javascript für onmousedown IE aufzubauen nur zu beheben .. aber die msie von jquery könnte auch in der onmousedown verwendet werden .. Die Hauptidee ist, die „onchange“ und auf verwischen die Auswahlbox wieder normal zu haben .. . Sie entscheiden eigene Breite für diejenigen sind. 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%'"
BalusC Antwort oben funktioniert gut, aber es gibt ein kleines Update ich, wenn der Inhalt Ihrer Dropdown eine geringere Breite als das, was hat hinzufügen möchten Sie in Ihrem CSS select.expand definieren, fügen Sie diese in die Mouseover-Bindung:
.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
if ($(this).width() < 300) // put your desired minwidth here
{
$(this).removeClass('expand');
}})
Das ist etwas l getan haben Bits von anderen Leuten Sachen nehmen.
$(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' });
});
}
});
wo cboEthnicity und cboDisability sind Dropdown-Listen mit der Option Text breiter als die Breite des Auswahl selbst.
Wie Sie sehen können, l haben, da dies funktioniert nur in IE angegeben document.all. Auch l die Dropdown-Listen 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>
Diese kümmert sich um die anderen Elemente deplatziert zu bewegen, wenn Ihr Dropdown erweitert. Der einzige Nachteil ist, dass die menulist visuelle verschwindet, wenn Sie die Auswahl aber zurück, sobald Sie ausgewählt haben.
Hoffe, das hilft jemand.
Dies ist der beste Weg, dies zu tun:
select:focus{
min-width:165px;
width:auto;
z-index:9999999999;
position:absolute;
}
es ist genau die gleiche wie BalusC Lösung. Nur das ist einfacher. ;)
Eine vollwertiges jQuery-Plugin zur Verfügung. Es unterstützt non-breaking Layout und Tastatur-Interaktionen, die Demo-Seite an: http://powerkiki.github.com/ ie_expand_select_width /
Disclaimer: Ich das Ding codiert, Patches willkommen
Die Lösung von mir verbessert die jquery BalusC. Verwendet auch:. Brad Robertsons Kommentar hier
setzen diese nur in einer Js, verwenden Sie die große Klasse für die gewünschten Combos und sie schmieden nicht eine ID zu geben. Rufen Sie die Funktion im onload (oder documentReady oder was auch immer).
So einfach ass, dass :)
Es wird die Breite, die Sie für die Combo als minimun Länge definiert 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');
})
}
}
Sie können einen Stil direkt mit dem select-Elemente hinzu:
<select name="foo" style="width: 200px">
Also das ausgewählte Element wird 200 Pixel breit sein.
Alternativ können Sie eine Klasse oder ID auf das Element anwenden und es in einem Stylesheet Referenz
Bisher gibt es keine. Sie wissen nicht, über IE8 aber es kann nicht in IE6 & IE7 getan werden, wenn Sie Ihre eigene Dropdown-Liste Funktionalität mit JavaScript implementieren. Es gibt Beispiele, wie es auf dem Netz zu tun, obwohl ich in dem Duplizieren vorhandene Funktionalität nicht viel Nutzen sehen.
Wir haben die gleiche Sache auf einem asp: Dropdownlist:
In Firefox (3.0.5) der Drop-Down ist die Breite des längsten Eintrags in der Dropdown-Liste, die wie 600 Pixel breit oder so ähnlich ist.
Dies scheint mit IE6 zu arbeiten und scheint nicht andere zu brechen. Die andere nette Sache ist, dass es das Menü ändert sich automatisch, sobald Sie Ihre Drop-Down-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 YUI Animation Work-around) in der ersten besten Antwort ist gebrochen, ich denke, die Domain abgelaufen wurde. Ich kopierte den Code, bevor es abgelaufen habe, so können Sie es hier finden (Besitzer Code kann mich informieren, wenn ich irgendwelche Urheberrechte bin Verletzung durch erneute Hochladen)
Auf der gleiche Blog-Post ich ein exakt gleiches SELECT-Element zu machen, wie die normalen Menü mit YUI-Taste geschrieben. Werfen Sie einen Blick und lassen Sie mich wissen, ob das hilft!
Auf der Grundlage der Lösung gepostet von Sai , ist dies, wie zu tun es mit 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:''}); });
});
Ich dachte, ich meinen Hut in den Ring werfen würde. Ich mache eine SaaS-Anwendung und ich hatte ein Auswahlmenü in einer Tabelle eingebettet. Diese Methode funktioniert, aber es verzerrt alles in der Tabelle.
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';}"
Also, was ich alles besser zu machen haben die select in einem z-Index div werfen war.
<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>
Die in allen Versionen von IE getestet, Chrome, FF & Safari
// 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-Code
<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 habe, um dieses Problem zu arbeiten habe und kam einmal mit einer ziemlich vollständigen und skalierbare Lösung für IE6 Aufarbeitung, 7 und 8 (und kompatibel mit anderen Browsern offensichtlich). Ich geschrieben habe einen ganzen Artikel über sie hier: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer
Ich dachte, ich würde dies für Menschen teilen, die nach wie vor in dieses Problem laufen, da keine der oben genannten Lösungen in jedem Fall arbeiten (meiner Meinung nach).
Ich habe versucht, alle diese Lösungen und keiner war für mich völlig. Das ist, was ich kam mit
$(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);
Achten Sie darauf, eine Dropdown-Klasse zu jedem Drop-Down in Ihrem html
hinzufügenDer Trick hier ist die spezielle Klick-Funktion (ich es hier Brandereignis wird jedes Mal, wenn ein Dropdownlist-Element mit jQuery ausgewählt). Viele der anderen Lösungen hier verwenden, um die Event-Handler-Änderung, die gut funktioniert, aber nicht ausgelöst, wenn der Benutzer die gleiche Option wählt, wie zuvor ausgewählt wurde.
Wie viele der anderen Lösungen konzentrieren und mousedown- ist, wenn der Benutzer legt die Drop-down im Fokus, Unschärfe ist für, wenn sie wegklicken.
Sie können auch nur es eine Art von Browser-Erkennung in diese so haften Effekte, dh. Es sieht nicht schlecht in anderen Browsern, obwohl
