it-swarm-pt.tech

Largura da lista suspensa em IE

No IE, a lista suspensa tem a mesma largura da caixa suspensa (espero que esteja fazendo sentido), enquanto no Firefox a largura da lista suspensa varia de acordo com o conteúdo.

Basicamente, isso significa que eu tenho que garantir que a caixa de depósito seja grande o suficiente para exibir a seleção mais longa possível. Isso torna minha página muito feia :(

Existe alguma solução alternativa para esse problema? Como posso usar CSS para definir larguras diferentes para a caixa de depósito e a lista suspensa?

92
Nimesh Madhavan

Aqui está outro exemplo baseado em jQuery . Ao contrário de todas as outras respostas postadas aqui, leva em consideração todos os eventos de teclado e mouse, especialmente cliques:

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

Use-o em combinação com este pedaço de CSS:

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

Tudo que você precisa fazer é adicionar a classe wide ao (s) elemento (s) suspenso (s) em questão.

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

Aqui está um exemplo do jsfiddle . Espero que isto ajude.

102
BalusC

Criar sua própria lista suspensa é mais trabalhoso do que vale a pena. Você pode usar um pouco de JavaScript para fazer com que o menu suspenso IE funcione.

Ele usa um pouco da biblioteca YUI e uma extensão especial para corrigir as caixas de seleção IE.

Você precisará incluir o seguinte e agrupar seus elementos <select> em um <span class="select-box">

Coloque-os antes da etiqueta do corpo da sua página:

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

Edição pós-aceitação:

Você também pode fazer isso sem a biblioteca YUI e o controle de hackers. Tudo o que você realmente precisa fazer é colocar um elemento onmouseover = "this.style.width = 'auto'" onmouseout = "this.style.width = '100px'" (ou o que você quiser) no elemento selecionado. O controle YUI fornece essa animação agradável, mas não é necessária. Essa tarefa também pode ser realizada com jquery e outras bibliotecas (embora eu não tenha encontrado documentação explícita para isso)

- alteração da edição:
O IE tem um problema com a onmouseout para controles de seleção (não considera o mouseover em opções como um mouseover no select). Isso torna o uso do mouse muito complicado. A primeira solução é a melhor que encontrei até agora.

14
Sleep Deprivation Ninja

você pode apenas tentar o seguinte ...

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

Eu tentei e funciona para mim. Nada mais é necessário.

12
Sai

Usei a seguinte solução e parece funcionar bem na maioria das situações.

<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: o $. Browser.msie requer jquery.

9
Justin Fisher

@Você também precisa adicionar um manipulador de eventos de desfoque

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

No entanto, isso ainda expandirá a caixa de seleção ao clicar, em vez de apenas os elementos. (e parece falhar no IE6, mas funciona perfeitamente em Chrome e IE7)

7
Tinus

Se você usa o jQuery, tente este IE selecione o plugin de largura:

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

A aplicação desse plug-in faz com que a caixa de seleção no Internet Explorer pareça funcionar como no Firefox, Opera etc, permitindo que os elementos de opção sejam abertos em largura total sem perder a aparência e o estilo da largura fixa. Ele também adiciona suporte para preenchimento e bordas na caixa de seleção no Internet Explorer 6 e 7.

5
Ewen

Não há como fazê-lo no IE6/IE7/IE8. O controle é desenhado pelo aplicativo e IE simplesmente não o desenha dessa maneira. Sua melhor aposta é implementar seu próprio menu suspenso via HTML/CSS/JavaScript simples, se for importante ter a largura do menu suspenso e a lista outra largura.

5
Robert C. Barth

No jQuery, isso funciona muito bem. Suponha que o menu suspenso tenha id = "menu suspenso".

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

Aqui está a solução mais simples.

Antes de começar, devo informar que a caixa de seleção suspensa será expandida automaticamente em quase todos os navegadores, exceto no IE6. Portanto, eu faria uma verificação no navegador (ou seja, IE6) e escreveria o seguinte apenas nesse navegador. Aqui vai. Primeiro verifique o navegador.

O código expande magicamente a caixa de seleção suspensa. O único problema com a solução é onmouseover, o menu suspenso será expandido para 420px e, como o estouro = oculto, estamos ocultando o tamanho do menu suspenso expandido e mostrando-o como 170px; portanto, a seta no lado direito do ddl ficará oculta e não poderá ser vista. mas a caixa de seleção será expandida para 420px; que é o que realmente queremos. Experimente o código abaixo e use-o, se quiser.

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

O acima é o CSS do IE6. O CSS comum para todos os outros navegadores deve ser o seguinte.

.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

verifique isso .. não é perfeito, mas funciona e é apenas para IE e não afeta o FF. Eu usei o javascript regular para onmousedown para estabelecer IE apenas consertar .. mas o msie do jquery poderia ser usado também no onmousedown .. a idéia principal é "onchange" e on blur para selecionar retorne ao normal ... decida que você é a sua própria largura. Eu precisava de 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 você deseja um menu suspenso e/ou menu desdobrável simples sem efeitos de transição, basta usar CSS ... você pode forçar o IE6 a suportar: passe o mouse sobre todos os elementos usando um arquivo .htc (css3hover?) com comportamento (propriedade apenas do IE6) definido em o arquivo CSS anexado condicionalmente.

2
cam

A resposta do BalusC acima funciona muito bem, mas há uma pequena correção que eu adicionaria se o conteúdo do seu menu suspenso tivesse uma largura menor do que o que você define no CSS select.expand, adicione isso ao bindover do mouse:

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

Isso é algo que fiz retirando pedaços das coisas de outras pessoas.

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

        }
    });

onde cboEthnicity e cboDisability são listas suspensas com o texto da opção maior que a largura da própria seleção.

Como você pode ver, especifiquei document.all, pois isso só funciona no IE. Além disso, coloquei as caixas suspensas nos elementos div como este:

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

Isso cuida dos outros elementos que se deslocam quando o menu suspenso se expande. A única desvantagem aqui é que o visual menulista desaparece quando você seleciona, mas retorna assim que você seleciona.

Espero que isso ajude alguém.

2
Derrick

esta é a melhor maneira de fazer isso:

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

é exatamente o mesmo que a solução BalusC. Só isso é mais fácil. ;)

2
mcmwhfy

Um plugin completo do jQuery está disponível. Ele suporta interações ininterruptas de layout e teclado, confira a página de demonstração: http://powerkiki.github.com/ie_expand_select_width/

isenção de responsabilidade: eu codifiquei essa coisa, patches de boas-vindas

2
PowerKiKi
1
Ybbest

A solução do jquery BalusC melhorou por mim. Utilizado também: Brad Robertson comente aqui .

Basta colocar isso em um arquivo .js, usar a classe ampla para os combos desejados e não forjar para fornecer um ID. Chame a função no onload (ou documentReady ou o que for).
Como burro simples que :)
Ele usará a largura que você definiu para o combo como comprimento mínimo.

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

Eu tentei todas essas soluções e nenhuma funcionou completamente para mim. Isto é o que eu vim com

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

Certifique-se de adicionar uma classe suspensa a cada lista suspensa em seu html

O truque aqui é usar a função de clique especializada (eu a encontrei aqui evento Fire cada vez que um item DropDownList é selecionado com jQuery ). Muitas das outras soluções aqui usam a alteração do manipulador de eventos, que funciona bem, mas não será acionada se o usuário selecionar a mesma opção que foi selecionada anteriormente.

Como muitas outras soluções, foco e redução são para quando o usuário coloca a lista suspensa em foco, o desfoque é para quando eles clicam fora.

Você também pode querer colocar algum tipo de detecção no navegador, para que isso só afete, por exemplo. Embora não pareça ruim em outros navegadores

0
RasTheDestroyer

Isso parece funcionar com o IE6 e não parece prejudicar os outros. A outra coisa interessante é que ele muda o menu automaticamente assim que você altera sua seleção suspensa.

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

});
0
lhoess

Com base na solução publicada por Sai , é assim que se faz com o 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

Temos a mesma coisa em um asp: dropdownlist:

No Firefox (3.0.5), o menu suspenso é a largura do item mais longo do menu suspenso, com 600 pixels de largura ou algo assim.

0
Harlequin

Você pode adicionar um estilo diretamente ao elemento de seleção:

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

Portanto, esse item selecionado terá 200 pixels de largura.

Como alternativa, você pode aplicar uma classe ou ID ao elemento e referenciá-lo em uma folha de estilo

0
Katy

O link hedgerwow (a solução alternativa da animação YUI) na primeira melhor resposta está quebrado, acho que o domínio expirou. Copiei o código antes que ele expirasse, para que você possa encontrá-lo aqui (o proprietário do código pode me informar se estou violando algum direito autoral fazendo o upload novamente)

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

No mesmo post, escrevi sobre como criar exatamente o mesmo elemento SELECT como o normal usando o menu do botão YUI. Dê uma olhada e deixe-me saber se isso ajuda!

0
Hammad Tariq

Até agora não há um. Não conheço o IE8, mas ele não pode ser feito no IE6 e IE7, a menos que você implemente sua própria funcionalidade de lista suspensa com javascript. Existem exemplos de como fazê-lo na Web, embora não haja muitos benefícios em duplicar a funcionalidade existente.

0
pilsetnieks

É testado em todas as versões do IE, Chrome, FF e Safari

// código JavaScript

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

// Código 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

Eu tive que solucionar esse problema e uma vez surgiu uma solução bastante completa e escalonável para o IE6, 7 e 8 (e compatível obviamente com outros navegadores). Eu escrevi um artigo inteiro aqui: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-Explorer

Pensei em compartilhar isso para pessoas que ainda estão enfrentando esse problema, pois nenhuma das soluções acima funciona em todos os casos (na minha opinião).

0
Aerendel

Eu pensei em jogar meu chapéu no ringue. Eu faço um aplicativo SaaS e eu tinha um menu de seleção incorporado dentro de uma tabela. Esse método funcionou, mas distorceu tudo na tabela.

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

Então, o que fiz para melhorar tudo foi lançar o select dentro de uma div indexada em 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