Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IE10 Select box issue

I was testing my application in IE10 and found a strange behavior for select box. The option selected is highlighted and options above/below are displayed above/below the selected one. The drop down box is hidden.

This happens only in IE10. In all other browsers, options are displayed below the select box.

Try with below sample code in IE10 and IE9:

<!DOCTYPE html>
<html>
    <body>
        <select>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
        </select>
    </body>
</html>

Is there any way to make the options below the select box like usual or there is any hack for IE10?

Thanks.

like image 268
user1948426 Avatar asked Jan 04 '13 12:01

user1948426


3 Answers

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.

like image 160
Sampson Avatar answered Nov 09 '22 18:11

Sampson


Use <select size="1"> to force a single line visible. This is not an IE10 specific hack but works across the board.

like image 44
Jan Wikholm Avatar answered Nov 09 '22 19:11

Jan Wikholm


One of the advantages of the new behavior in IE10 is that it makes touch interaction much easier. Also, it is consistent with how the rest of Windows behaves. There are currently no ways to change this behavior. I have passed the feedback to the IE team.

like image 1
Luis Cantero Avatar answered Nov 09 '22 19:11

Luis Cantero