CODEWITHSUNDEEP
javascriptjqueryhtmlcssmsdropdown
IsaacFCosta
IsaacFCosta

Reputation: 9

jQuery msDropdown ie9 issues

I'm developing a website in asp.net, and I use the msDropdown-master jQuery to modify an turn a dropdownlist "more beautiful", placing images in the options and so on.

But using this control, I have a real problem because it doesn't work fine in IE9 and lowers...

From Firefox the control appear like this:

Control msDropdown... Working fine in Firefox

From IE 9, seen in IETester appear like this:

Control msDropdown... Not Working in IE9 using IETester

This is how the control should appear in all browsers, I pretend to made my site crossbrowing for all versions of IE7 to the most recent, and all other browsers.

As code I can show you the code that I use, for the msDropdown css I use the default, dd.css provided, in the official website (https://github.com/marghoobsuleman/ms-Dropdown).

For the dropdown the ASP code is:

<asp:DropDownList runat="server" ID="ddLanguageSelector" CssClass="LanguageSelector" AutoPostBack="True" onchange="javascript:if(this.options[this.selectedIndex].value == 'More'){ showMoreLanguages(); return false; }" OnSelectedIndexChanged="ddLanguageSelector_SelectedIndexChanged" meta:resourcekey="ddLanguageSelectorResource" />

The jQuery / Javascript code is:

// Language Selector
$(document).ready(function (e) {
    try {
        $("header div.Wrapper div.HeaderUserAccess select.LanguageSelector").msDropDown();
    } catch (e) {
        alert(e.message);
     }
});

As requested in comments, I will put here the regitration of the jquery as I use in the site:

<!--[if lt IE 8]><!-->
<script type="text/javascript" src="Content/Scripts/jQuery/jquery-1.11.0/jquery-1.11.0.min.js"></script>
<!--<![endif]-->
<!--[if gt IE 8]|!(IE)><!-->
<script type="text/javascript" src="Content/Scripts/jQuery/jquery-2.1.0/jquery-2.1.0.min.js"></script>
<!--<![endif]-->

Ok, so what I do really need is to found a whay where the msDropdown does not apear unformated in IE 9, 8 and 7.

Does anyone of you know the reason for this behavior of the control in the IE9?

Ok... For now I just have confirmed the following:

  1. I have a structure where I have a div, with css "position: relative;"
  2. Inside that div, i have several divs with css "position: absolute;"
  3. The dropdownlist is inside one of those divs containing css "position: absolute;"

For now I just believe that this is the problem, because i remove the dropdown list outside the div structure and it works perfect in all IE9, IE8, IE7 and even in IE6.

So now the question is... how to handle the dropdownlist inside the div structure? Knowing that it misbehaves in IE9 and lower in that structure?

And a good solution for this issue... Please....

Thanks in advance for the given attention.

Upvotes: 0

Views: 1108

Answers (2)

IsaacFCosta
IsaacFCosta

Reputation: 9

I found the problem, it appends only in IE9 and lower versions, because the ms-Dorpdown generates several divs, and the first div I created was with the property possition: absolute;, this makes IE9 not work. The solution I found for this was create a old structure of tables instead of divs...

For old browsers compatibility old structures...

Upvotes: 0

Jaime Garc&#237;a P&#233;rez
Jaime Garc&#237;a P&#233;rez

Reputation: 953

I think that is jquery version problem. Use this code:

<!--[if lt IE 9]>
    <script src="Content/Scripts/jQuery/jquery-1.11.0/jquery-1.11.0.min.js"></script>
<![endif]-->
<!--[if (gte IE 9) | (!IE)]><!-->
    <script src="Content/Scripts/jQuery/jquery-2.1.0/jquery-2.1.0.min.js"></script>
<!--<![endif]-->

Hope it works. Tested in: http://jsfiddle.net/3BzGP/9/show/ with all IE versions.

Check too the IE jquery versions that works (compatible) http://jquery.com/browser-support/

Upvotes: 0

Related Questions