Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 543
DaveDev Avatar asked Jun 17 '11 15:06

DaveDev


People also ask

How do you make select options appear outside the DIV container?

How can I make the dropdown go outside the div? try with the div position:relative and the dropdown menus position:absolute . Position:absolute worked, thanks!

Why is content overflowing the Div?

Overflow happens when there is too much content to fit in a box. CSS provides various tools to manage overflow. As you go further with CSS layout and writing CSS, you will encounter more overflow situations.

Can we add div inside select?

You shouldn't be using div tags inside the select. Use option tags instead.


Video Answer


1 Answers

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.

like image 100
John Strickler Avatar answered Sep 20 '22 16:09

John Strickler