I have a problem with my select .. Default value is "please choose" .. but there are some options like "Acommodation & Hotels" .. so its bigger than the default value .. so its not clearly seen on IEs, it works ok in FF, how can I do this? with css or javascript? what is the best solution ? thank you
NOTE : I want to strech the <option>
element not select
OK so here is the solution I figured out after quite some time. It will automatically increase the size of the select box based on the maximum width of the child options.
<script type="text/javascript">
window.onload = function()
{
var elem = document.getElementById('test');
var values = elem.length;
var biggest_value = 0;
var biggest_option = '';
for(var i = 0; i <= values; i++)
{
if (elem.options[i])
{
var len = elem.options[i].value.length;
}
if (biggest_value < len)
{
biggest_value = len;
biggest_option = elem.options[i];
}
}
document.getElementById('test').style.width = biggest_option.offsetWidth + 'px';
};
</script>
The Select Box:
<select id="test">
<option value="Hello">Hello</option>
<option value="Hello Again">Hello Again</option>
<option value="Hello Yet Again">Hello Yet Again</option>
</select>
Did you try to use something like:
select {width:100%}
It will take the full size of the parent node.
CSS:
<style type="text/css">
.myselect
{
width:150px;
}
</style>
Apply myselect class to your select box. Also adjust the width if you want from 150.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.