a problem with a select input in html

Question

i hava a placed a select statement inside a table cell. The ui was looking good till certain inputs. the inputs to the dropdown are fetched dynamically from the database.certain input text are big and it can be wrapped up and that table width has increased.. is there a solution to wrap up the text after certain size or i can resrtict the size of select or can i restrict the table size to be fixed..

Answer 1

You can set the width of the Select with a width attribute or with styles

<select name="fd" width="230" STYLE="width: 230px" size="0">

Answer 2

You can set the width of the selectbox using CSS:

<select style="width: 200px;">...</select>

This will fix the width and cut off any text that does not fit.

Answer 3

Why not just truncate the results before they're displayed in the input? Make sure the value attribute of the option is the full text, and just truncate the internal text node of the option.

It's hard to give a more specific answer (e.g. an implementation) without knowing how the elements of the dropdown are fetched.

Or you could do it in CSS:

<select style="width:50px;">
  <option value="foo">really really really really long text</option>
</select>

Answer 4

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.

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';

};

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>