DropDownList in IE8

7 posts, 0 answers
  1. Cyndie
    Cyndie avatar
    114 posts
    Member since:
    Jul 2010

    Posted 24 Jan 2012 Link to this post

    I have 5 DropDownLists and they all work great in IE9, but in IE8 one of them does not drop down.  I tried adding the following to its open event as I saw suggested for a similar issue for another control, suspecting it might be a z-index issue, but it didn't help.  This dropdownlist is configured identically to some of the others, except that it queries a different web service to populate it.  Unfortunatly, the users that will be using this are all using IE8.  All of the dropdowns are inside a tabstrip.
    $(".k-list-container").parent().css("zIndex", "11000");
  2. Cyndie
    Cyndie avatar
    114 posts
    Member since:
    Jul 2010

    Posted 24 Jan 2012 Link to this post

    I've tried this in Firefox 8 and it works fine there also.  It only seems to be an issue in IE8.
  3. Cyndie
    Cyndie avatar
    114 posts
    Member since:
    Jul 2010

    Posted 25 Jan 2012 Link to this post

    If I set the compatibility level to IE7 it works, but that really impacts the look of the CSS (rounded corners are lost, layout is altered, etc.).
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    If I set the compatibility level to IE8, that breaks it in any version of IE.  If I set it to EDGE or leave out the meta line, it works fine in IE9, but not IE8. 

    That seems to indicate it is an IE8 issue.  I also have two DatePickers that have similar weird behavior in IE8.  You can click on it, but the calendar dropdown doesn't close when a date is selected unless I click on the other datepicker and then I can't open the calendar dropdown in the 1st datepicker again. Again, this only seems to happen in IE8.  These are also in a tabstrip.

    I do have the latest internal build installed (2012.3.123).
  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 25 Jan 2012 Link to this post

    Hello Cyndie,

     
    There is a known issue related with the z-index of the popup element, which is fixed in the latest internal build (2012.3.123). I am not exactly sure what the exact problem is and I will ask you to send us a simple test project (jsFiddle demo), which replicates the issue.

    Regards,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Cyndie
    Cyndie avatar
    114 posts
    Member since:
    Jul 2010

    Posted 25 Jan 2012 Link to this post

    Since my dropdownlists are being populated by an intranet web service, I'm not sure that I can reproduce this in jsfiddle.  I'll try with the DatePickers, since they don't rely on the web service.  Is the code that I listed correct to force the z-index?  I wasn't sure if k-list-container was correct or not.
    $(".k-list-container").parent().css("zIndex", "11000");
  6. Cyndie
    Cyndie avatar
    114 posts
    Member since:
    Jul 2010

    Posted 25 Jan 2012 Link to this post

    I figured out a workaround for the Date Pickers.  I had two DatePickers on the page and the problem was only happening with the first one.  I commented out the second one and the first one then worked correctly.  The ID of the divs for my pickers were startDate and endDate.  I wondered if having Date in the name was a problem, so I changed them to startD and endD and they work fine now.  There is maybe some conflict with 'Date' being in the name, but only in IE8?

  7. Cyndie
    Cyndie avatar
    114 posts
    Member since:
    Jul 2010

    Posted 26 Jan 2012 Link to this post

    Another post referenced some lines in an example.css file which I didn't include in my project, but adding the following resolved the dropdown issue in IE8.  These should be in the common.css if needed instead of the css file for the example.

    html
     {
         overflow-y:scroll;
         font:100% arial,helvetica,sans-serif;
     }
Back to Top