How to get <select> box to overflow out of the containing <div>?

Question

background:

The client asked me to give them some dropdowns. So I gave them some, populated with lots of different options.

They liked the way the dropdowns looked in Firefox and Chrome, because the dropdown would automatically expand for to the width of the text, as depicted:

But this isn't the case with IE

Internet Explorer is the goth-teen of the web development world and likes to behave differently so it's not seen by its peers as a conformist, it seems. It doesn't see the value in expanding a dropdown to enable the user to read all of the text it contains. So it looks like this:

This wasn't good enough for the client, so they asked me to fix it. I found a jQuery plugin that would resize the text box when you gave it focus so that when it opened you could see all the text in it. An example is available here: (be sure to load this in IE8 or less)

http://jsfiddle.net/tmcNP/3/

the question:

Notice how when you click on the All companies dropdown, it forces the dropdown onto the next line? Is there any way I can get it to stay on the same line, and 'overflow'* out of the containing div?

*not sure if this is the correct term, in this context.

Answer 1

It's because the plugin is resizing the <select> to match the longest <option> inside of it. Unfortunately, the only work around to this would be to position:absolute the select inside of it's parent (set to position:relative).

Really this is going to happen to any of those dropdowns that have content larger than it can hold. It's unfortunate but you can't control the <select>'s behavior unless you simulate a select using a <div> which is what a lot of JS UI frameworks do such as Dojo.