IE11 Issues - Dropdown List - Overlay

http://stackoverflow.com/questions/18053645/dropdownlist-styling-in-internet-explorer

 dropdownlist styling in Internet explorer

uavorite 2

I have some problems with the way IE renders my DropDownList. In Firefox it looks as it should and thats the way I wanted displayed in IE too. Here is a screenshot of the dropdownlist in Firefox: screenshot in IE: I want the dropdown to expand vertically up until where the dropdownlist is, I don't want the dropdown to go below the existing dropdown control. Is there some trick how to do that with css? Thanks in advance, Laziale

5 Answers

active oldest votes

up vote 4 down vote

Dropdown lists are essentially controlled by the browser. Limited styling does work sometimes, but it's completely untrustworthy cross-browser. The reason for this is that they're often actually using the operating system's rendering for the dropdown. If you want full control over your dropdown, you have to draw it yourself from scratch using <ul>'s and <li>'s, make the dropdown trigger an <a> tag and use javascript to toggle visibility of the <ul> and transfer chosen values. JavaScript plugins exist which take an existing dropdown & do something comparable to this to it. I don't know one which matches your request exactly, but something like a JQueryUI autocomplete in combobox mode (http://jqueryui.com/autocomplete) may give you a good starting point to style from. share|improve this answer answered Sep 8 '13 at 23:59 fyjham 3,7091330

i support the above solution. We need to build our own dropdown by using unordered list and use hover event on li to display the dropdown . This can be done through pure css. I don't think so we need any javascript plugin. –  user2594152 Sep 12 '13 at 6:09 add comment

up vote 4 down vote +25

This is just the way that drop-down menus work in Internet Explorer 10 and up (as well as in Windows Store apps): when the menu opens, the selected item overlays the drop-down control, which other items appearing above and below it. Presumably, Microsoft made this change so that the menu is more touch friendly. I browsed through the list of CSS properties supported by Internet Explorer, but I didn't notice any that affect the position of the menu. So if this behavior is unacceptable, you will need to eschew the native operating system control in favor of an HTML/CSS-based drop-down menu, such as jQuery Selectmenu or Telerik's RadDropDownList. share|improve this answer edited Sep 15 '13 at 14:36 answered Sep 8 '13 at 23:49 Michael Liu 14.2k22557

add comment

up vote 1 down vote

Refer - IE10 Select box issue This is the default behavior for this control in Internet Explorer 10. Depending on the number of items in the list and the size of the screen, other browsers will display the menu differently as well - though I think IE10 is the only browser that will balance the number of items above and below the select element when the dropdown is opened. share|improve this answer answered Sep 10 '13 at 6:19 Tadit Dash 242222

add comment

up vote 0 down vote

The reason for this is that every browser has a different implementation for select boxes. It's almost impossible to implement a nice crossbrowser supported select box. The only way to do a 'secure' implementation is to hide the select box and replace it with a custom select list implementation. I would highly recommend to use an already existing component. If you already use jQuery, have a look at Select2. Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. I use it since a couple of months on my page and I can say that it's absolutely great. share|improve this answer answered Sep 14 '13 at 16:00 Luke94 487210

add comment

up vote 0 down vote

This jsfiddle is not final but you will have no choice to have your own custom select list if you have it to appear the same in every broswer. The example in my jsfiddle is the easiest way for me to implement a select list. By using <input type="radio" />radio button, it is easy to customize it via css and to get the selected value. Just take a look at it. share|improve this answer answered Sep 15 '13 at 19:59 morgul 82718