how to strech select ?

Question

Hi all, 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

Answer 1

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.

Answer 2

Did you try to use something like:

select {width:100%}

It will take the full size of the parent node.

Answer 3

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>