Develop Reference

What determines the size of a select element when it is clicked on?

I have a select element with 22 options in five optgroups. On some browsers, if I click on the select, it only displays the top 14 options and the scroll bar won't reveal the rest of the options list. I'm trying to determine what governs the behavior of the select element when it is clicked on, and I'm not having much luck.
In most browsers, everything seems to happen automatically and correctly, but sometimes it's cut off. I'm hoping to determine what's cutting it off in these browsers and fix it. When it doesn't work, it looks like this:
https://www.dropbox.com/s/spi63bkl290zyfd/SelectIssue.jpg?dl=0

Select2 width based on the widest option?

Is there a way to make a select2 work like a normal select in terms of width? E.g. the selected element is as wide as the widest element in the list and vice versa. I want to avoid setting a fixed or 100% width. I found a way to get the selected element and the dropdown to adjust automatically each on their own, but not working as a pair. Ideas?

You can accomplish simply with css on the select
width: auto

Dropdownlist formatting using CSS

I am basically using a dropdownlist control on an asp.net page, where I have set the width to 150px. In mozilla browser, it is showing the list items expanded, whereas in IE, the list item text is restricted to drop down list's width. Any idea, how can I can get the same appearance of this dropdownlist in IE as it is in Mozilla.
I just want the list items container to be expanded to its maximum width, NOT the dropdownlist box.

I'm pretty sure that you can't set the width of the dropdown and the options independently - that's up to the browser. The only option is to replicate the behaviour of the dropdown list yourself in javascript. Basically you would create something that looks like a dropdown list control and attach a click event handler which would display an absolutely positioned div (or ul) displaying the options. You would then attach an event handler to each option that would hide the options and take the action you need - probably display the option in the text of the dropdown control and store the value (a hidden form field would help here if this is a form you wish to submit). This is a fair bit of work but would have the advantage of looking identical in all browsers as long as you're careful with your css. I don't have time to write the code here but it should be fairly straightforward once you accept that there is no quick fix.

I think you are looking for the following solution.
https://jsfiddle.net/avernet/2Gn2c/
$("select.ie8-fallback")
.on('mousedown' , 'select', expand)
.on('blur change' , 'select', contract);
Although i would recommend using this code only with IE using IE8 if condition.
I would have provided a solution specific to your question if you added any code, But i think you can understand from this.

vertical drop down menu getting cut off in IE using javascript

The drop down box as well as the longest option in drop down gets cut off in IE7. This works fine in Mozilla and chrome. I am new to JSP and javascript.
I am using:
style="width:240%"
Option for the drop down is fetched from db. Even if the option is visible it goes out of the page and hence looks odd.
Is there a way to display the option in 2 lines in JSP?
please help

try style = auto, that means it automatically goes to the width of the longest option.

If you have the option to, remove the width from the style, this usually causes issues with select lists in IE. If not, multi line select list options aren't possible with html select list controls, but you can use a div that can act as a dropdown list using JavaScript and css. http://jquery.sanchezsalvador.com/page/jquerycombobox.aspx

a way to tell if options do not fit inside of a select - in IE

In IE6, and possibly 7, if you set the width of an to any value other then auto, if the options inside of that select are wider then the select's width, they get cut off. this is bad. Firefox is smart enough to not do this.
Question:
How can i tell if the options are being cut off with javascript?
How have you dealt with this issue other then setting width to auto?

Good question. A bit of a rant here but IE's implementation of <select> controls is abysmal. It has the following problems (among others I'm sure):
(As you've noticed) setting the width on the <select> cuts off <option> elements, regardless of overflow instructions
they have this magic ability to sit overtop of all other controls on the page, regardless of position and layering (z-index) instructions. This was a huge PITA for early developers of "dialog" widgets; any dropdowns behind the dialog would bleed through overtop of the dialog itself.
you cannot disable individual <option> elements
you cannot hide/show individual <option> elements
the <select> does not reflect css styles set on the selected <option>
can't set the innerHTML property to a string of new option items
if you do not set a value attribute on each <option>, mySelectBox.value silently fails
when using the keyboard arrows to navigate throught the list of <option> elements, the change event fires on every keystroke (Opera has this problem too)
css styles on <option>s and <optgroup>s are generally completely ignored (only backgound-color and color work)
programmatically changing the options list hides the dropdown (this sucks for "type ahead" implementation attempts who want the dropdown to stay visible)
IE7 tries to fit all the options on the screen when shown. For large lists this means the dropdown content will sit overtop of the dropdow when shown (this in and of itself is not wrong, but it is inconsistent with other IE versions)
As for your problem, one solution is to toggle the width to "auto" when the options are shown, and set if back to a set width when the options are closed, as outlined here: http://css-tricks.com/select-cuts-off-options-in-ie-fix/
The obvious drawback of this is that the screws up the flow of the document as neighboring elements all shift around to account for width:auto setting.

Take a look at this post by Chris Coyier.