it-swarm-eu.dev

Dropdownlistenbreite in IE

Im Internet Explorer hat die Dropdown-Liste die gleiche 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?

92
Nimesh Madhavan

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 lediglich die Klasse wide zu den betreffenden Dropdown-Elementen hinzufügen.

<select class="wide">
    ...
</select>

Hier ist ein jsfiddle Beispiel . Hoffe das hilft.

102
BalusC

Das Erstellen einer eigenen Dropdown-Liste ist mehr mühsam als lohnenswert. Sie können JavaScript verwenden, um das Dropdown-Menü IE zu aktivieren.

Es wird ein Teil der YUI-Bibliothek und eine spezielle Erweiterung zum Korrigieren von IE Auswahlfeldern verwendet.

Sie müssen Folgendes angeben und Ihr <select> Elemente in einem <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>

Post Annahme bearbeiten:

Sie können dies auch ohne die YUI-Bibliothek und die Hack-Steuerung 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 ausgewählte 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 durchgeführt werden (obwohl ich keine explizite Dokumentation dafür gefunden habe)

- Änderung der Änderung:
IE hat ein Problem mit dem onmouseout für Auswahlsteuerelemente (Mouseover auf Optionen wird nicht als Mouseover auf der 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 für mich. Sonst ist nichts erforderlich.

12
Sai

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 $. Browser.msie ist eine Abfrage erforderlich.

9
Justin Fisher

@Sie müssen auch einen Blur-Event-Handler 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");
        }
    });
});

Hierdurch wird jedoch das Auswahlfeld beim Klicken erweitert und nicht nur die Elemente. (und es scheint in IE6 zu scheitern, funktioniert aber perfekt in Chrome und IE7)

7
Tinus

Wenn Sie jQuery verwenden, probieren Sie Folgendes aus IE= width plugin auswählen:

http://www.jainaewen.com/files/javascript/jquery/ie-select-style/

Durch das Anwenden dieses Plugins wird das Auswahlfeld in Internet Explorer so angezeigt, als würde es in Firefox funktionieren, Opera etc.), Indem die Optionselemente in voller Breite geöffnet werden, ohne das Erscheinungsbild und den Stil des Fixed zu verlieren width: Fügt außerdem Unterstützung für Auffüllen und Rahmen für das Auswahlfeld in Internet Explorer 6 und 7 hinzu.

5
Ewen

Dies ist in IE6/IE7/IE8 nicht möglich. Das Steuerelement wird von der App gezeichnet und IE einfach nicht so. Am besten implementieren Sie Ihr eigenes Dropdown-Menü über einfaches HTML/CSS/JavaScript, wenn dies so wichtig ist Haben Sie die Dropdown-eine Breite und die Liste eine andere Breite.

5
Robert C. Barth

In jQuery funktioniert das ziemlich gut. Angenommen, die Dropdown-ID lautet "dropdown".

$(document).ready(function(){

    $("#dropdown").mousedown(function(){
    if($.browser.msie) {
        $(this).css("width","auto");
    }
    });
    $("#dropdown").change(function(){
    if ($.browser.msie) {
        $(this).css("width","175px");
    }
    });

});
4
Thad

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. Ich würde also eine Browserprüfung durchführen (d. H. IE6) und das Folgende nur für diesen Browser schreiben. Hier kommt's. Überprüfen Sie zuerst den Browser.

Der Code erweitert das Dropdown-Auswahlfeld auf magische Weise. Das einzige Problem bei der Lösung ist, dass das Dropdown-Menü auf 420 Pixel erweitert wird. Da der Überlauf = versteckt ist, wird die erweiterte Dropdown-Größe ausgeblendet und als 170 Pixel angezeigt. der pfeil auf der rechten seite des ddl wird also ausgeblendet und ist nicht sichtbar. 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 möchten.

.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 aussehen.

.ctrDropDown
{
    width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
    width:auto; <%-- this the width of the dropdown select box.--%>
}
3
bluwater2001

check this out .. es ist nicht perfekt, aber es funktioniert und es ist nur für IE und betrifft nicht FF. Ich habe das reguläre Javascript für onmousedown verwendet, um IE = nur fix .. aber die msie von jquery könnte auch im onmousedown verwendet werden .. die hauptidee ist das "onchange" und das "blur", damit das auswahlfeld wieder normal wird ... entscheide dich für deine eigene breite 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%'"
2
lucien

wenn Sie ein einfaches Dropdown- und/oder Flyout-Menü ohne Übergangseffekte wünschen, verwenden Sie einfach CSS. Sie können den IE6 zwingen, Folgendes zu unterstützen: Bewegen Sie den Mauszeiger über alle Elemente, indem Sie eine .htc-Datei (css3hover?) mit dem in definierten Verhalten (nur IE6-Eigenschaft) verwenden die bedingt angehängte CSS-Datei.

2
cam

Die obige Antwort von BalusC funktioniert prima, aber es gibt eine kleine Korrektur, die ich hinzufügen würde, wenn der Inhalt Ihres Dropdowns eine geringere Breite als die in Ihrer CSS-select.expand definierte Breite hat. Fügen Sie dies zur Mouseover-Bindung hinzu:

.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
                                if ($(this).width() < 300) // put your desired minwidth here
                                {
                                    $(this).removeClass('expand');
                                }})
2
jbabey

Das ist etwas, was ich getan habe, um anderen Leuten Dinge 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 Dropdown-Listen mit Optionstext, der breiter als die Breite der Auswahl selbst ist.

Wie Sie sehen, 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 verschoben werden, wenn sich Ihre Dropdown-Liste erweitert. Der einzige Nachteil dabei ist, dass die Menülistenanzeige bei der Auswahl nicht mehr angezeigt wird, sondern wieder angezeigt wird, sobald Sie sie ausgewählt haben.

Hoffe das hilft jemandem.

2
Derrick

dies ist der beste Weg, um dies zu tun:

select:focus{
    min-width:165px;
    width:auto;
    z-index:9999999999;
    position:absolute;
}

es ist genau das gleiche wie die BalusC-Lösung. Nur das ist einfacher. ;)

2
mcmwhfy

Ein vollwertiges jQuery-Plugin ist verfügbar. Es unterstützt unterbrechungsfreie Layout- und Tastaturinteraktionen. Schauen Sie sich die Demoseite an: http://powerkiki.github.com/ie_expand_select_width/

haftungsausschluss: Ich habe das Ding codiert, Patches sind willkommen

2
PowerKiKi
1
Ybbest

Die jquery BalusC Lösung hat sich von mir verbessert. Wird auch verwendet: Brad Robertson's Kommentar hier .

Fügen Sie dies einfach in ein .js ein, verwenden Sie die Klasse wide für Ihre gewünschten Combos und geben Sie ihr keine ID. Rufen Sie die Funktion in der Onload (oder documentReady oder was auch immer).
So einfach ist das :)
Es wird die Breite verwendet, die Sie für die Combo als minimale Länge definiert haben.

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');
    })
    }
}
1
Federico Valido

Ich habe alle diese Lösungen ausprobiert und keine funktionierte vollständig für mich. 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 jeder Dropdown-Liste 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, ein Feuerereignis ). Viele der anderen hier beschriebenen Lösungen verwenden die Ereignisbehandlungsroutine, die gut funktioniert, jedoch nicht ausgelöst wird, wenn der Benutzer die zuvor ausgewählte Option auswählt.

Wie bei vielen anderen Lösungen gilt "Fokus" und "Mausunterdrückung", wenn der Benutzer das Dropdown-Menü in den Fokus stellt, und "Unschärfe", wenn er darauf klickt.

Sie können auch eine Art Browser-Erkennung verwenden, damit dies nur z. In anderen Browsern sieht es allerdings nicht schlecht aus

0
RasTheDestroyer

Dies scheint mit IE6 zu funktionieren und scheint andere nicht zu beschädigen. Das andere Schöne 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");
        }
    });

});
0
lhoess

Basierend auf der Lösung von Sai wird dies mit jQuery durchgeführt.

$(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:''}); });
});
0
Ahmad Alfy

Wir haben dasselbe auf einer asp: dropdownlist:

In Firefox (3.0.5) entspricht die Dropdown-Liste der Breite des längsten Elements in der Dropdown-Liste. Sie ist etwa 600 Pixel breit oder so ähnlich.

0
Harlequin

Sie können einen Stil direkt zum ausgewählten Element hinzufügen:

<select name="foo" style="width: 200px">

Das ausgewählte Element ist also 200 Pixel breit.

Alternativ können Sie eine Klasse oder ID auf das Element anwenden und in einem Stylesheet darauf verweisen

0
Katy

Der Hedgerwow-Link (die YUI-Animationsumgehung) 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 Eigentümer des Codes kann mich benachrichtigen, wenn ich gegen Urheberrechte verstoße, indem ich ihn erneut hochlade.)

http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/

Im selben Blogeintrag schrieb ich über das Erstellen eines genau gleichen SELECT-Elements wie das normale mit dem YUI-Button-Menü. Schau mal rein und lass es mich wissen, wenn das hilft!

0
Hammad Tariq

Bisher gibt es keine. Sie kennen den IE8 nicht, können ihn jedoch nicht in IE6 und IE7 ausführen, es sei denn, Sie implementieren Ihre eigene Dropdown-Listen-Funktionalität mit Javascript. Es gibt Beispiele, wie man das im Web macht, obwohl ich keinen großen Nutzen darin sehe, vorhandene Funktionen zu duplizieren.

0
pilsetnieks

Es wurde in allen Versionen von IE, Chrome, FF und 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>
0
Arif

Ich musste dieses Problem umgehen und fand 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 teile dies für Leute, die immer noch auf dieses Problem stoßen, da keine der oben genannten Lösungen in jedem Fall funktioniert (meiner Meinung nach).

0
Aerendel

Ich dachte, ich würde meinen Hut in den Ring werfen. Ich erstelle eine SaaS) - Anwendung und habe ein Auswahlmenü in eine Tabelle eingebettet. Diese Methode hat funktioniert, aber sie hat 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';}"

Also, was ich getan habe, um alles besser zu machen, war, die Auswahl in ein Div mit Z-Index 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>
0
n0nag0n