Alex Rivera | Logout

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

Asked 2011-06-17T15:52:56.490
17

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:

enter image description here

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:

enter image description here

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.

javascript jquery html css
Edit
Report

1 Answer

0

You can put each line of three selects in a div and add a class to those two divs like so:

.line{
 height: 40px; 
 width: 800px;  
  }


  <div class='line'>
  <select>...</select> <select>...</select>  <select>...</select>   
  </div>  
  <div class='line'>
  <select>...</select> <select>...</select>  <select>...</select>   
  </div>
answered 2011-06-17T16:42:54.340

Your Answer