Download

Selectoverflow.js is available from the Copix framework repository.

Using the plugin:

  1. Link to mootools and the plugin file in the <head> of your document.
  2. When the DOM is ready, call new SelectOverflow('MyLongSelectID');
  3. Style span.selectoverflow input to look like a select.

Options

You can pass an object containing properties for the text input as the 2nd parameter. Usefull to add a class to it for instance.

Code examples

Adding links to the head

<script type="text/javascript" src="/js/mootools.js"></script>
<script type="text/javascript" src="/js/plugins/selectoverflow.js"></script>

Turning regular selects into SelectOverflow

window.addEvent('domready', function(){
	new SelectOverflow('select1');
	var select2 = $('select2');
	// do something to select2...
	new SelectOverflow(select2);
	new SelectOverflow('otherLongSelect', {'class':'text'}); // input will have class="text"
});

Styling the selects

<style type="text/css">
select { width: 115px;} /* The normal selects */
span.selectoverflow select {width: auto;} /* The repositionned selects */
span.selectoverflow input {} /* the text inputs */
</style>

Demo (added August 18, 2009)

See the results for yourself on the demo page.