javascript - How to get <select> box to overflow out of the containing <div>? - Stack Overflow

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)

/

the question:

Notice how when you click on the All panies 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.

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/tmcNP/3/

the question:

Notice how when you click on the All panies 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

Share Improve this question Follow asked Jun 17, 2011 at 15:52 DaveDevDaveDev 42.3k7373 gold badges232232 silver badges395395 bronze badges 3

• +1 immediately for not being a conformist... solution is still churning in my head. – John Strickler Commented Jun 17, 2011 at 15:55
• 2 +1 for a well-worded question with screenshots and a testcase! And no greetings, thanks or tags in titles. I love you a bit. – Lightness Races in Orbit Commented Jun 17, 2011 at 16:44
• I love you right back, man! Group hug, everyone!! – DaveDev Commented Jun 20, 2011 at 9:40

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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>  

The proposed custom select controll will wrap the long option line to fit the size: jquery-keyselect