Two DropDownList not functioning property in IE7 - list opens but never closes

5 posts, 0 answers
  1. Michael
    Michael avatar
    3 posts
    Member since:
    Nov 2011

    Posted 04 Apr 2012 Link to this post

    I have a basic screen with two kendo ui dropdownlists and I'm testing with IE7.  The second dropdownlist on the screen opens but then doesn't close after a selection is made.  I created a sample page with only the two controls and I can duplicate the issue.  The lists work fine in all other browsers.  I also tested this with more than two kendo ui dropdownlists and the first one on the page always works and any subsequent lists have the same closing issue. I am a licensed user with a company in Philadelphia and I'm using the latest version of kendo v2012.1.322. 

    Here is my sample code:

          <%@ Page Title="Home Page" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false"
    CodeBehind="Default.aspx.vb" Inherits="TestKendoUI._Default" %>

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript" src='Library/KendoUI/js/kendo.all.min.js'></script>
    <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
    <link href="Library/KendoUI/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="Library/KendoUI/styles/kendo.silver.min.css" rel="stylesheet" />
    <script type="text/javascript" src='Scripts/jquery-ui-1.8.16.custom.min.js'></script>
    <script type="text/javascript" src='Scripts/ModalWindow.js'></script>
    <script type="text/javascript" src='Scripts/includes/js/jquery.inputWatermark.js'></script>
    <script type="text/javascript" src='Scripts/Insight.js'></script>

    <script type="text/javascript" language="javascript">
    $(document).ready(function () {
    //Dropdown 1
    var ddlTemplate1 = $("#<%= ddlRegimen1.ClientID %>").kendoDropDownList();
    ddlTemplate1.bind("change", function (e) {
    alert("HEY")
    });

    //Dropdown 2
    var ddlTemplate2 = $("#<%= ddlRegimen2.ClientID %>").kendoDropDownList();
    ddlTemplate2.bind("change", function (e) {
    alert("NOW")
    });
    });

    </script>

    </asp:Content>
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <table class="ComparisonTable" cellpadding="0" cellspacing="0">
    <tr>
    <td align="center">
    <asp:DropDownList ID="ddlRegimen1" runat="server" Width="465px">
    <asp:ListItem>TEST1</asp:ListItem>
    <asp:ListItem>TEST2</asp:ListItem>
    </asp:DropDownList>
    </td>
    <td align="center">
    <asp:DropDownList ID="ddlRegimen2" runat="server" Width="465px">
    <asp:ListItem>TEST3</asp:ListItem>
    <asp:ListItem>TEST4</asp:ListItem>
    </asp:DropDownList>
    </td>
    </tr>
    </table>
    </asp:Content>
  2. Michael
    Michael avatar
    3 posts
    Member since:
    Nov 2011

    Posted 05 Apr 2012 Link to this post

    I found a temporary work around for this issue.  The problem only affects the last dropdownlist on the screen.  So if three lists are present, the third list has the issue and the other two work properly.  I temporarily fixed the issue by adding a third list to the screen and just making it invisible.
  3. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 06 Apr 2012 Link to this post

    Hi Michael,

     I tried to reproduce your case but everything worked as expected. Since I haven't included the several custom JS files that I see in your code, I would suggest to test your app without them and if the problem persists - to send us a sample project from your licensed account. Thus the ticket will reach the corresponding staff and will be checked and answered faster. 

    Greetings,
    Georgi Tunev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Michael
    Michael avatar
    3 posts
    Member since:
    Nov 2011

    Posted 06 Apr 2012 Link to this post

    Hi Georgi,

    Thanks for the quick reply.  I managed to fix the problem in my test project by removed the .footer tag from a style sheet used within the project.  The custom js files didn't appear to be the cause of the issue.  I'm still unable to fix the issue on my application and I'm working on removing custom js/css files to identify which one is causing the issue.   We are also planning on implementing namespaces on our custom js files. 

    Problem tag removed from Site.css

    .footer
    {
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
    }
  5. Thomas
    Thomas avatar
    1 posts
    Member since:
    May 2012

    Posted 30 May 2012 Link to this post

    Hi, 

    Did you end up resolving this issue? 

    I am having the same problem where I have 8 drop down list on the page, and the last 2 (of each row) opens and works with the "change" event, but never closes; 

    This only happens in IE7 (and can be reproduced in IE9 Compat View) 

    This was tested on version - v2011.3.1129 & v2012.1.322

    Thanks 



Back to Top