Combobox ( select ) extended option

Asked

Viewed 1,198 times

4

I have a select with a "width" defined, however, there are some cases where the "option" is too long, end up cutting the selected option as the image:

inserir a descrição da imagem aqui

Customer complained from that point, a solution, would give a width based on the larger options, but even so, has the possibility to end up cutting, any suggestion?

css css3

  • Make select not fixed in size.

  • 1

    Another suggestion... Put only the n first characters of the product name in the dropdown. Or use a more elaborate control like those of Bootstrap, it is worth taking a look.

1 answer

1

If you can’t leave the select without a defined width, I present three solutions:

1.) With jquery, set the title same as the text of selected by changing the option:

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

2.) With CSS, increase width in hover about the 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.) With jquery, reset the width of the select according to the width of the selected by changing the option:

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

HTML:

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

See working on Jsfiddle (here is a 4th option)

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.