Larghezza elenco a discesa in IE

92

In IE, l'elenco a discesa ha la stessa larghezza della casella a discesa (spero di avere senso) mentre in Firefox la larghezza dell'elenco a discesa varia a seconda del contenuto.

Ciò significa fondamentalmente che devo assicurarmi che la casella personale sia abbastanza ampia da visualizzare la selezione più lunga possibile. Questo rende la mia pagina molto brutta :(

C'è qualche soluzione alternativa per questo problema? Come posso utilizzare CSS per impostare larghezze diverse per la casella personale e l'elenco a discesa?

javascript  html  internet-explorer  drop-down-menu 
— Nimesh Madhavan
fonte

Risposte:

102

Ecco un altro esempio basato su jQuery . Contrariamente a tutte le altre risposte pubblicate qui, prende in considerazione tutti gli eventi di tastiera e mouse, in particolare i clic:

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

Usalo in combinazione con questo pezzo di CSS:

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

Tutto quello che devi fare è aggiungere la classe wideagli elementi a discesa in questione.

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

Ecco un esempio di jsfiddle . Spero che questo ti aiuti.

— BalusC
fonte
2
+1: Da tutte le soluzioni proposte qui, questa ha funzionato meglio per me. Avevo anche bisogno di modificare CSS e HTML per farlo funzionare per il mio caso. Tanto lavoro, per qualcosa che dovrebbe funzionare fuori dagli schemi.
— kgiannakakis
1
Funziona con IE7 non in IE6 - C'è un tweak per questo per IE6?
— DMin
4
@DMin: Siamo spiacenti, non supportiamo browser vecchi e obsoleti come IE6.
— BalusC
3
@BalusC: :) So che il mio amico IE fa schifo - tuttavia ho usato la tua risposta, ha funzionato per IE7 - ha scritto un codice separato per IE6 che includeva la tua risposta + bind. ('Mouseenter' .. - ha funzionato bene - Grazie comunque! :)
— DMin
3
A seconda delle altre regole CSS, potresti dover aggiungere! Important alla larghezza ..width: auto !important;
— Tapirboy
14

Creare il tuo elenco a discesa è più complicato di quanto valga la pena. Puoi utilizzare JavaScript per far funzionare il menu a discesa di IE.

Usa un po 'della libreria YUI e un'estensione speciale per correggere le caselle di selezione di IE.

Dovrai includere quanto segue e racchiudere i tuoi <select>elementi in un file<span class="select-box">

Inseriscili prima del tag body della tua pagina:

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

Modifica post accettazione:

Puoi farlo anche senza la libreria YUI e il controllo Hack. Tutto quello che devi fare è mettere un onmouseover = "this.style.width = 'auto'" onmouseout = "this.style.width = '100px'" (o quello che vuoi) sull'elemento select. Il controllo YUI dà quella bella animazione ma non è necessario. Questa attività può essere eseguita anche con jquery e altre librerie (anche se non ho trovato documentazione esplicita per questo)

- emendamento alla modifica:
IE ha un problema con l'onmouseout per i controlli di selezione (non considera il passaggio del mouse sulle opzioni come passaggio del mouse sulla selezione). Questo rende l'uso di un mouseout molto complicato. La prima soluzione è la migliore che ho trovato finora.

— Ninja della privazione del sonno
fonte
3
Ottengo un 404 su entrambi i collegamenti
— Chris B
Il problema con questa correzione è se hai selezioni dinamiche, ad esempio in un'applicazione di e-commerce per gli attributi del prodotto. Non saprai mai gli ID di tutti i menu a discesa
— leen3o
1
I link non sono più 404 ma mostrano ciò che considero spam dannoso. Ho preso in considerazione la votazione negativa, ma sarò gentile e mi limiterò a segnalarlo.
— davur
12

potresti semplicemente provare quanto segue ...

  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=''"

Ho provato e funziona per me. Nient'altro è richiesto.

— Sai
fonte
1
Fantastico, l'ho migliorato un po '(usando il commento condizionale per il rilevamento di IE) e ho aggiunto alcuni commenti, funziona alla grande e non jQuery o altre librerie. Vedi qui: jsbin.com/ubahe5/edit - plz MODIFICA la tua risposta che VOGLIO DARVI +1, ma non posso perché ho votato male prima.
— Marco Demaio
9

Ho usato la seguente soluzione e sembra funzionare bene nella maggior parte delle situazioni.

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

Nota: $ .browser.msie richiede jquery.

— Justin Fisher
fonte
Per chiunque altro si senta assonnato che dovrebbe essere onmousedown non onmousdown - mi ci sono voluti alcuni istanti per vedere il problema
— shearichard
7

@Ho dovuto aggiungere anche un gestore di eventi sfocatura

$(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");
        }
    });
});

Tuttavia, questo espanderà comunque la casella di selezione al clic, anziché solo gli elementi. (e sembra fallire in IE6, ma funziona perfettamente in Chrome e IE7)

— Tinus
fonte
5

Non c'è modo di farlo in IE6 / IE7 / IE8. Il controllo viene disegnato dall'app e IE semplicemente non lo disegna in questo modo. La soluzione migliore è implementare il tuo menu a discesa tramite un semplice HTML / CSS / JavaScript se è così importante avere il menu a discesa di una larghezza e l'elenco di un'altra larghezza.

— Robert C. Barth
fonte
la soluzione è: usa javascript e css per regolare automaticamente la larghezza al passaggio del mouse (e altri eventi della tastiera ...). leggi qui: css-tricks.com/select-cuts-off-options-in-ie-fix the best solution (less invasive)
— tuffo19
5

Se usi jQuery, prova questo plug-in di selezione della larghezza di IE:

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

L'applicazione di questo plugin fa sì che la casella di selezione in Internet Explorer sembri funzionare come funzionerebbe in Firefox, Opera ecc. Consentendo agli elementi delle opzioni di aprirsi a tutta larghezza senza perdere l'aspetto e lo stile della larghezza fissa. Aggiunge inoltre il supporto per il riempimento e i bordi nella casella di selezione in Internet Explorer 6 e 7.

— Ewen
fonte
4

In jQuery questo funziona abbastanza bene. Supponiamo che il menu a discesa abbia 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");
    }
    });

});
— Eran Medan
fonte
3

Ecco la soluzione più semplice.

Prima di iniziare, devo dirti che la casella di selezione a discesa si espanderà automaticamente in quasi tutti i browser tranne IE6. Quindi, farei un controllo del browser (cioè IE6) e scriverei quanto segue solo su quel browser. Eccolo. Per prima cosa controlla il browser.

Il codice si espanderà magicamente la casella di selezione a discesa. L'unico problema con la soluzione è sulmouse, inoltre il menu a discesa verrà espanso a 420 px e poiché overflow = nascosto stiamo nascondendo la dimensione del menu a discesa espansa e mostrandola come 170 px; quindi, la freccia sul lato destro del ddl sarà nascosta e non potrà essere vista. ma la casella di selezione verrà espansa a 420px; che è quello che vogliamo veramente. Prova tu stesso il codice qui sotto e usalo se ti piace.

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

Quanto sopra è IE6 CSS. Il CSS comune per tutti gli altri browser dovrebbe essere il seguente.

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

se vuoi un semplice menu a tendina e / o a comparsa senza effetti di transizione usa semplicemente CSS ... puoi forzare il supporto di IE6: passa il mouse su tutti gli elementi usando un file .htc (css3hover?) con comportamento (solo proprietà di IE6) definito in il file CSS allegato in modo condizionale.

— Camera
fonte
2

controlla questo .. non è perfetto ma funziona ed è solo per IE e non influisce su FF. Ho usato il normale javascript per onmousedown per stabilire IE solo fix .. ma il msie da jquery potrebbe essere utilizzato anche in onmousedown .. l'idea principale è "onchange" e su blur per far tornare la casella di selezione alla normalità .. decidi che sei la larghezza per quelli. Avevo bisogno del 35%.

onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}" 
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"
— lucien
fonte
2

La risposta di BalusC sopra funziona alla grande, ma c'è una piccola correzione che aggiungerei se il contenuto del tuo menu a discesa ha una larghezza inferiore a quella che definisci nel tuo CSS select.expand, aggiungilo al collegamento del mouseover:

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

Questo è qualcosa che ho fatto prendendo pezzi dalle cose di altre persone.

        $(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' });
            });

        }
    });

dove cboEthnicity e cboDisability sono elenchi a discesa con il testo dell'opzione più largo della larghezza della selezione stessa.

Come puoi vedere, ho specificato document.all poiché funziona solo in IE. Inoltre, ho racchiuso i menu a discesa all'interno di elementi div in questo modo:

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

Questo si prende cura degli altri elementi che si spostano fuori posto quando il menu a discesa si espande. L'unico svantaggio qui è che la visualizzazione del menulista scompare quando si seleziona ma ritorna non appena si seleziona.

Spero che questo aiuti qualcuno.

— Derrick
fonte
2

questo è il modo migliore per farlo:

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

è esattamente lo stesso della soluzione BalusC. Solo questo è più facile. ;)

— mcmwhfy
fonte
Ho testato nuovamente il tuo css e funziona in Chrome e un po 'in Firefox, ma non in IE8. (Forse il mio IE8 è una versione diversa?) Da allora ho escogitato la mia soluzione basata su js. Vedi tahirhassan.blogspot.co.uk/2013/02/…
— Tahir Hassan
Giocare un po 'in IE8 con questo e una modifica successiva ha aiutato. Dovevo solo mettere il genitore <td> a una larghezza fissa, riposizionare il valore superiore e ¡ahí estuvo !. Grazie
— j4v1
1

La soluzione di jquery BalusC è stata migliorata da me. Usato anche: il commento di Brad Robertson qui .

Mettilo in un .js, usa la classe ampia per le tue combo desiderate e non cercare di dargli un ID. Chiama la funzione in onload (o documentReady o qualsiasi altra cosa).
Come semplice asino che :)
Userà la larghezza che hai definito per la combo come lunghezza minima.

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');
    })
    }
}
— Federico Valido
fonte
0

Puoi aggiungere uno stile direttamente all'elemento selezionato:

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

Quindi questo elemento selezionato sarà largo 200 pixel.

In alternativa puoi applicare una classe o un id all'elemento e farvi riferimento in un foglio di stile

— Katy
fonte
0

Finora non ce n'è uno. Non so di IE8 ma non può essere fatto in IE6 e IE7, a meno che tu non implementi la tua funzionalità di elenco a discesa con javascript. Ci sono esempi su come farlo sul Web, anche se non vedo molti vantaggi nel duplicare le funzionalità esistenti.

— pilsetnieks
fonte
0

Abbiamo la stessa cosa su un asp: elenco a discesa:

In Firefox (3.0.5) il menu a discesa è la larghezza dell'elemento più lungo nel menu a discesa, che è largo come 600 pixel o qualcosa del genere.

0

Questo sembra funzionare con IE6 e non sembra rompere gli altri. L'altra cosa bella è che cambia automaticamente il menu non appena si modifica la selezione a discesa.

$(document).ready(function(){
    $("#dropdown").mouseover(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $("#dropdown").trigger("mouseover");
        }
    });

});
— lhoess
fonte
0

Il collegamento hedgerwow (il work-around dell'animazione YUI) nella prima migliore risposta è rotto, immagino che il dominio sia scaduto. Ho copiato il codice prima che scadesse, quindi puoi trovarlo qui (il proprietario del codice può farmi sapere se sto violando i diritti d'autore caricandolo di nuovo)

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

Sullo stesso post del blog ho scritto sulla creazione dello stesso identico elemento SELECT come quello normale utilizzando il menu del pulsante YUI. Dai un'occhiata e fammi sapere se questo aiuta!

— Hammad Tariq
fonte
0

Sulla base della soluzione pubblicata da Sai , ecco come farlo con 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:''}); });
});
— Ahmad Alfy
fonte
0

Ho pensato di lanciare il mio cappello sul ring. Realizzo un'applicazione SaaS e avevo un menu di selezione incorporato all'interno di una tabella. Questo metodo ha funzionato, ma ha distorto tutto nella tabella.

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';}"

Quindi quello che ho fatto per rendere tutto migliore è stato lanciare la selezione all'interno di un div z-index.

<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>
— n0nag0n
fonte
0

È testato in tutte le versioni di IE, Chrome, FF e Safari

// codice JavaScript

<script type="text/javascript">
<!-- begin hiding
function expandSELECT(sel) {
  sel.style.width = '';
}
function contractSELECT(sel) {
  sel.style.width = '100px';
}
// end hiding -->
</script>

// Codice 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>
— Arif
fonte
0

Ho dovuto aggirare questo problema e una volta ho trovato una soluzione abbastanza completa e scalabile funzionante per IE6, 7 e 8 (e ovviamente compatibile con altri browser). Ho scritto un intero articolo al riguardo proprio qui: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer

Ho pensato di condividerlo per le persone che stanno ancora riscontrando questo problema, poiché nessuna delle soluzioni di cui sopra funziona in ogni caso (secondo me).

— Aerendel
fonte
0

Ho provato tutte queste soluzioni e nessuna ha funzionato completamente per me. Questo è quello che ho pensato

$(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);

Assicurati di aggiungere una classe a discesa a ciascun menu a discesa nel tuo html

Il trucco qui sta usando la funzione di clic specializzata (l'ho trovato qui Evento di fuoco ogni volta che un elemento DropDownList viene selezionato con jQuery ). Molte delle altre soluzioni qui utilizzano la modifica del gestore eventi, che funziona bene ma non si attiverà se l'utente seleziona la stessa opzione selezionata in precedenza.

Come molte altre soluzioni, la messa a fuoco e il mousedown sono per quando l'utente mette a fuoco il menu a discesa, la sfocatura è per quando fa clic.

Potresti anche voler applicare un qualche tipo di rilevamento del browser in questo modo in modo che abbia effetto solo ad es. Tuttavia, non sembra male in altri browser

— RasTheDestroyer
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.