I have a select with a width defined, however, there are some cases where the option is too long, it ends by cutting the selected option, according to the image:
Customer complained about this point, a solution, would give a width based on the larger options, but still, have the possibility to end up cutting, any suggestions?
If you can not leave select without a defined width, I present three solutions:
1) With jquery, set the title equal to the text of selected by changing the option:
$('#select1').change(function () {
$(this).attr('title', $(this).children(':selected').text());
});
2.) With CSS, increase width only in hover over 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 select by width of selected by changing 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 in JSFiddle (here you have a 4th option)