4

Tenho um select com uma "width" definida, porém, existem alguns casos em que o "option" é muito extenso, acaba cortando a opção selecionada, conforme a imagem:

inserir a descrição da imagem aqui

Cliente reclamou desse ponto, uma solução, seria dar uma width com base nos options maiores, mas mesmo assim, tem a possibilidade de acabar cortando, alguma sugestão?

2
  • Faça com que o select não tenha tamanho fixo. Commented 27/08/2014 às 20:53
  • 1
    Outra sugestão... Coloque apenas os n primeiros caracteres do nome do produto no dropdown. Ou use um controle mais elaborado como os do Bootstrap, vale a pena dar uma olhada. Commented 27/08/2014 às 20:54

1 Resposta 1

1

Se não pode deixar o select sem uma largura definida, apresento três soluções:

1.) Com jquery, definir o title igual ao texto do selected ao mudar a opção:

$('#select1').change(function () {
    $(this).attr('title', $(this).children(':selected').text());
});

2.) Com CSS, aumentar a largura apenas no hover sobre o select:

select {
    width:100px;
    height:22px;
    padding:0;
    margin:0;
}
#container {
    display:inline-block;
    position:relative;
    width:100px;
    height: 16px;
}
#ancora {
    display:inline-block;
    position:absolute;
    top:0;
    left:0;
}
#select2:hover {
    width:auto;
}

HTML:

<div id='container'>
    <div id='ancora'>
        <select id='select2'>
            <option>Morango</option>
            <option>Menta</option>
            <option>Chocolate</option>
            <option>Caipirinha</option>
            <option>Morango com champanhe</option>
            <option>Uva</option>
        </select>
    </div>
</div>

3.) Com jquery, redefinir a largura do select conforme a largura do selected ao mudar a opção:

$('#select3').change(function () {
    $(this).width($('#tmp-width').html($(this).children(':selected').text()).width() + 30);
});

HTML:

<span id="tmp-width" style="display:none"></span>

Veja funcionando no JSFiddle (aqui tem uma 4ª opção)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .