it-swarm.it

Larghezza dell'elenco a discesa in IE

In IE, l'elenco a discesa ha la stessa larghezza del menu a discesa (spero di avere un senso) mentre in Firefox la larghezza dell'elenco a discesa varia in base al contenuto.

Ciò significa sostanzialmente che devo assicurarmi che il dropbox sia abbastanza largo da visualizzare la selezione più lunga possibile. Questo rende la mia pagina molto brutta :(

C'è qualche soluzione per questo problema? Come posso usare CSS per impostare larghezze diverse per dropbox e l'elenco a discesa?

92
Nimesh Madhavan

Ecco un altro esempio basato su jQuery . Contrariamente a tutte le altre risposte pubblicate qui, tiene conto di tutti gli eventi della tastiera e del 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 wide agli elementi a discesa in questione.

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

Ecco un esempio di jsfiddle . Spero che sia di aiuto.

102
BalusC

Creare il tuo elenco a discesa è più una seccatura di quanto valga la pena. Puoi usare un po 'di JavaScript per far funzionare il menu a discesa IE.

Utilizza un po 'della libreria YUI e un'estensione speciale per il fissaggio delle caselle di selezione IE.

Dovrai includere quanto segue e racchiudere il tuo <select> elementi in un <span class="select-box">

Metti questi 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 accettazione post:

Puoi anche farlo senza la libreria YUI e il controllo Hack. Tutto quello che devi fare è inserire un elemento onmouseover = "this.style.width = 'auto'" onmouseout = "this.style.width = '100px'" (o qualunque cosa tu voglia) sull'elemento select. Il controllo YUI fornisce quell'animazione piacevole ma non è necessaria. Questa attività può essere eseguita anche con jquery e altre librerie (anche se non ho trovato documentazione esplicita per questo)

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

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.

12
Sai

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.

9
Justin Fisher

@È necessario aggiungere anche un gestore di eventi di 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, ciò espanderà comunque la casella di selezione al clic, anziché solo gli elementi. (e sembra non riuscire in IE6, ma funziona perfettamente in Chrome e IE7)

7
Tinus

Se usi jQuery, prova questo IE seleziona il plugin larghezza:

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

L'applicazione di questo plugin fa apparire la casella di selezione in Internet Explorer come funzionerebbe in Firefox, Opera ecc. Consentendo agli elementi di opzione di aprirsi a tutta larghezza senza perdere l'aspetto e lo stile del fisso larghezza Aggiunge inoltre il supporto per imbottitura e bordi nella casella di selezione in Internet Explorer 6 e 7.

5
Ewen

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

5
Robert C. Barth

In jQuery funziona abbastanza bene. Supponiamo che il menu a discesa abbia id = "menu a discesa".

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

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 scriverò quanto segue solo su quel browser. Eccolo. Prima controlla il browser.

Il codice espande magicamente la casella di selezione a discesa. L'unico problema con la soluzione è onmouseover il menu a discesa verrà espanso a 420px e poiché overflow = nascosto stiamo nascondendo la dimensione del menu a discesa espanso e mostrandolo come 170px; così, la freccia sul lato destro del ddl sarà nascosta e non può essere vista. ma la casella di selezione verrà espansa a 420 px; che è quello che vogliamo davvero. 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 è il CSS IE6. 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.--%>
}
3
bluwater2001

guarda questo .. non è perfetto ma funziona ed è per IE solo e non influenza FF. Ho usato il javascript normale per onmousedown per stabilire IE = solo correzione .. ma il msie di jquery potrebbe essere usato anche in onmousedown .. l'idea principale è "onchange" e su sfocatura per fare in modo che la casella selezionata ritorni alla normalità ... decidi che hai 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%'"
2
lucien

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

2
cam

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 select.expand CSS, aggiungi questo al collegamento del mouse:

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

Questo è qualcosa che ho fatto prendendo pezzi di roba 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 menu a discesa con 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 aspetto negativo qui è che il visual menulista scompare quando si seleziona ma ritorna non appena si è selezionato.

Spero che questo aiuti qualcuno.

2
Derrick

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

2
mcmwhfy

È disponibile un plug-in jQuery completo. Supporta il layout senza interruzioni e le interazioni della tastiera, controlla la pagina demo: http://powerkiki.github.com/ie_expand_select_width/

disclaimer: ho codificato quella cosa, patch benvenute

2
PowerKiKi
1
Ybbest

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

Basta inserirlo in un file .js, utilizzare la classe larga per le combinazioni desiderate e non creare un ID. Chiamare la funzione in onload (o documentReady o altro).
Che culo semplice :)
Userà la larghezza definita 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');
    })
    }
}
1
Federico Valido

Ho provato tutte queste soluzioni e nessuna ha funzionato completamente per me. Questo è quello che mi è venuto in mente

$(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 click specializzata (l'ho trovato qui Evento Fire ogni volta che un oggetto DropDownList viene selezionato con jQuery ). Molte delle altre soluzioni qui utilizzate utilizzano la modifica del gestore eventi, che funziona bene ma non si attiverà se l'utente seleziona la stessa opzione precedentemente selezionata.

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

Potresti anche voler attaccare un qualche tipo di rilevamento del browser in questo modo che abbia solo effetti. Non sembra male in altri browser però

0
RasTheDestroyer

Questo sembra funzionare con IE6 e non sembra infrangere gli altri. L'altra cosa bella è che cambia automaticamente il menu non appena si cambia 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");
        }
    });

});
0
lhoess

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

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 circa 600 pixel o qualcosa del genere.

0
Harlequin

Puoi aggiungere uno stile direttamente all'elemento select:

<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 fare riferimento in un foglio di stile

0
Katy

Il collegamento hedgerwow (l'animazione YUI aggirata) nella prima migliore risposta è interrotto, immagino che il dominio sia scaduto. Ho copiato il codice prima che sia scaduto, 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 sul blog ho scritto di creare esattamente lo stesso elemento SELECT come quello normale usando il menu Pulsante YUI. Dai un'occhiata e fammi sapere se questo aiuta!

0
Hammad Tariq

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

0
pilsetnieks

È 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>
0
Arif

Ho dovuto risolvere questo problema e una volta ho trovato una soluzione abbastanza completa e scalabile che funziona 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 con le persone che continuano a riscontrare questo problema, poiché nessuna delle soluzioni sopra descritte funziona in tutti i casi (secondo me).

0
Aerendel

Ho pensato di buttare il cappello sul ring. Faccio un SaaS e avevo un menu di selezione incorporato in 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 con indice z.

<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