Larghezza dell'elenco a discesa in IE
https://stackoverflow.com/questions/73960
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
In IE, l'elenco a discesa ha la stessa larghezza del dropbox (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 sufficientemente ampio da visualizzare la selezione più lunga possibile.Questo fa sembrare la mia pagina molto brutta :(
Esiste una soluzione alternativa a questo problema?Come posso utilizzare i CSS per impostare larghezze diverse per dropbox e dropdownlist?
Soluzione
Eccone un altro jQuery esempio basato.Contrariamente a tutte le altre risposte pubblicate qui, tiene conto di tutti gli eventi della tastiera e del mouse, in particolare dei 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 questo ti aiuti.
Altri suggerimenti
Creare il tuo elenco a discesa è più complicato di quanto valga la pena.Puoi utilizzare un po' di JavaScript per far funzionare il menu a discesa di IE.
Utilizza un po' della libreria YUI e un'estensione speciale per correggere le caselle di selezione di IE.
Dovrai includere quanto segue e avvolgere il tuo <select> elementi in a <span class="select-box">
Inserisci 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 post-accettazione:
Puoi farlo anche senza la libreria YUI e il controllo Hack.Tutto quello che devi fare è inserire un onmouseover="this.style.width='auto'" onmouseout="this.style.width='100px'" (o qualunque cosa tu voglia) sull'elemento selezionato.Il controllo YUI gli dà quella bella animazione ma non è necessaria.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 onmouseout per i controlli di selezione (non considera il passaggio del mouse sulle opzioni come un passaggio del mouse sulla selezione).Ciò rende l'utilizzo del mouseout molto complicato.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.Non è richiesto nient'altro.
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:IL $.browser.msie richiede jquery.
@Thad devi 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 fallire in IE6, ma funziona perfettamente in Chrome e IE7)
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 semplice HTML/CSS/JavaScript se è così importante avere il menu a discesa di una larghezza e l'elenco di un'altra larghezza.
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 opzione 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.
In jQuery 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");
}
});
});
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 (ad esempio IE6) e scriverei quanto segue solo su quel browser.Eccolo.Per prima cosa controlla il browser.
Il codice espanderà magicamente la casella di selezione a discesa.L'unico problema con la soluzione è che al passaggio del mouse il menu a discesa verrà espanso a 420 px e poiché overflow = nascosto nascondiamo la dimensione del menu a discesa espanso e la mostriamo 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 è ciò 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 è 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.--%>
}
se desideri un semplice menu a discesa e/o mobile senza effetti di transizione, usa semplicemente CSS...puoi forzare IE6 a supportare :hover su tutti gli elementi utilizzando un file .htc (css3hover?) con il comportamento (solo proprietà IE6) definito nel file CSS condizionalmente allegato.
controllalo..non è perfetto ma funziona ed è solo per IE e non influisce su FF.Ho usato il normale javascript per onmousedown per stabilire la correzione solo per IE..ma il msie di jquery potrebbe essere utilizzato anche in onmousedown..l'idea principale è "onchange" e sulla sfocatura per far tornare normale la casella di selezione...decidi che hai la larghezza giusta 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%'"
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');
}})
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 menu a discesa con testo di 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 dell'elenco dei menu scompare durante la selezione ma ritorna non appena hai selezionato.
Spero che questo aiuti qualcuno.
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.;)
È disponibile un plugin jQuery completo.Supporta layout ininterrotto e interazioni con la tastiera, controlla la pagina demo: http://powerkiki.github.com/ie_expand_select_width/
disclaimer:Ho codificato quella cosa, patch benvenute
La soluzione jquery BalusC è stata migliorata da me.Utilizzato anche:Quella di Brad Robertson commenta qui.
Mettilo semplicemente in un .js, usa la classe ampia per le combinazioni desiderate e non dimenticare di dargli un ID.Chiama la funzione in onload (o documentReady o altro).
Così semplice :)
Utilizzerà 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');
})
}
}
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
Finora non ce n'è uno.Non conosco IE8 ma non può essere eseguito in IE6 e IE7, a meno che 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.
Abbiamo la stessa cosa su un asp:dropdownlist:
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.
Sembra funzionare con IE6 e non sembra rompere gli altri.L'altra cosa bella è che cambia automaticamente il menu non appena cambi 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");
}
});
});
Il collegamento hedgerwow (la soluzione alternativa all'animazione YUI) nella prima migliore risposta è interrotto, 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 qualche copyright caricandolo di nuovo)
Nello stesso post del blog ho scritto su come creare esattamente lo stesso elemento SELECT come quello normale utilizzando il menu del pulsante YUI.Dai un'occhiata e fammi sapere se questo aiuta!
In base alla 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:''}); });
});
Ho pensato di lanciare il mio cappello sul ring.Realizzo un'applicazione 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 migliorare il tutto è stato inserire la selezione all'interno di un div indicizzato in 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>
È 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>
Ho dovuto aggirare 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 a 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 stanno ancora riscontrando questo problema, poiché nessuna delle soluzioni di cui sopra funziona in ogni caso (secondo me).
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 nell'usare la funzione di clic specializzata (l'ho trovata qui Attiva un evento 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 attiva se l'utente seleziona la stessa opzione selezionata in precedenza.
Come molte altre soluzioni, la messa a fuoco e il mousedown servono quando l'utente mette a fuoco il menu a discesa, la sfocatura serve quando fa clic altrove.
Potresti anche voler inserire una sorta di rilevamento del browser in questo in modo che abbia effetto solo ad es.Tuttavia non sembra male in altri browser
