Odd behavior in IE 10

5 posts, 0 answers
  1. Jimm
    Jimm avatar
    5 posts
    Member since:
    Jun 2013

    Posted 06 Jun 2013 Link to this post

    All, 

    Please see the following video: http://www.screencast.com/t/9UbonHDdPK0 . 

    In this video it shows that the Drop Down list will close after the scroll bar has been clicked in order to go to a hidden portion of the list.  at just past halfway in the video I changed focus to the Kendo.textarea that contains "asdf" and then went back to the drop down list and it works as expected.   the exact same page will work fine in Chrome, Firefox, and IE 9.   If I select the text area first and then select the dropdown list it works as expected.

    Thoughts?


    Regards,
    Jimm
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 10 Jun 2013 Link to this post

    Hello Jimm,

    I am not able to watch the video you shared. Could you please send it as attachment or upload it in a way so it does not require Windows Media Player ? Also a live URL which we could see the case in action or example in JSBin would help us find a solution.

    Thank you.

    Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jimm
    Jimm avatar
    5 posts
    Member since:
    Jun 2013

    Posted 10 Jun 2013 Link to this post

    here is the video zipped.  its an avi you should be able to watch with any player.

    <!--Ill work on a public facing example.-->

    http://jsbin.com/ukifil/2/  this will demo the issue, must load in IE 10 and select the dropdown list before  anything else.  the code and css is yanked from the dev machines as we are not in production yet.

     I'm also running /2013.1.514/ version as this fixed another problem I was having with the spinners.  Again only not working in IE 10 which is a must have for my business

    Let me know what you come up with.  

    Regards,
    Jimm

    ps: You guys should allow 7z archives as they are smaller.

    <=============================================================>
    Edit code: 
    http://jsbin.com/ukifil/2/edit
    had issues with the code view locally so here it is :
    <code>
    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
    <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
    <meta charset=utf-8 />
    <title>Welcome to JS Bin</title>
    <meta name="viewport" content="width=device-width">
    <link href='http://fonts.googleapis.com/css?family=Doppio+One' rel='stylesheet' type='text/css'>
    </head>
      
    <body>
      
      <div class="claimLeft">
        
              <div class="editor-label label">
                <label for="Info_LossState">State</label>
            </div>
            <div class="editor-field textbox inlineBlock">
                <input id="Info_LossState" name="Info.LossState" type="text" /><script>
    jQuery(function(){jQuery("#Info_LossState").kendoDropDownList({"dataSource":[{"Text":"Select State","Value":""},{"Text":"Alabama","Value":"AL"},{"Text":"Alaska","Value":"AK"},{"Text":"Arizona","Value":"AZ"},{"Text":"Arkansas","Value":"AR"},{"Text":"California","Value":"CA"},{"Text":"Colorado","Value":"CO"},{"Text":"Connecticut","Value":"CT"},{"Text":"Delaware","Value":"DE"},{"Text":"District of Columbia","Value":"DC"},{"Text":"Florida","Value":"FL"},{"Text":"Georgia","Value":"GA"},{"Text":"Hawaii","Value":"HI"},{"Text":"Idaho","Value":"ID"},{"Text":"Illinois","Value":"IL"},{"Text":"Indiana","Value":"IN"},{"Text":"Iowa","Value":"IO"},{"Text":"Kansas","Value":"KS"},{"Text":"Kentucky","Value":"KY"},{"Text":"Louisiana","Value":"LA"},{"Text":"Maine","Value":"ME"},{"Text":"Maryland","Value":"MD"},{"Text":"Massachussetts","Value":"MA"},{"Text":"Michigan","Value":"MI"},{"Text":"Minnesota","Value":"MN"},{"Text":"Mississippi","Value":"MS"},{"Text":"Missouri","Value":"MO"},{"Text":"Montana","Value":"MT"},{"Text":"Nebraska","Value":"NE"},{"Text":"Nevada","Value":"NV"},{"Text":"New Hampshire","Value":"NH"},{"Text":"New Jersey","Value":"NJ"},{"Text":"New Mexico","Value":"NM"},{"Text":"New York","Value":"NY"},{"Text":"North Carolina","Value":"NC"},{"Text":"North Dakota","Value":"ND"},{"Text":"Ohio","Value":"OH"},{"Text":"Oklahoma","Value":"OK"},{"Text":"Oregon","Value":"OR"},{"Text":"Pennsylvania","Value":"PA"},{"Text":"Puerto Rico","Value":"PR"},{"Text":"Rhode Island","Value":"RI"},{"Text":"South Carolina","Value":"SC"},{"Text":"South Dakota","Value":"SD"},{"Text":"Tennessee","Value":"TN"},{"Text":"Texas","Value":"TX"},{"Text":"Utah","Value":"UT"},{"Text":"Vermont","Value":"VT"},{"Text":"Virginia","Value":"VA"},{"Text":"Washington","Value":"WA"},{"Text":"West Virginia","Value":"WV"},{"Text":"Wisconsin","Value":"WI"},{"Text":"Wyoming","Value":"WY"}],"dataTextField":"Text","dataValueField":"Value"});});
    </script>
            </div>

            <div class="editor-label label vAlignMiddle">
                <label for="Info_AccidentCode">Select type?</label>
            </div>
            <div class="editor-field textbox inlineBlock" style="position:relative;">
                <input data-val="true" data-val-required="Required" id="Info_AccidentCode" name="Info.AccidentCode" type="text" value="OTHER" /><script>
    jQuery(function(){jQuery("#Info_AccidentCode").kendoDropDownList({"dataSource":[{"Text":"Select Accident Code","Value":""},{"Text":"Tow Only","Value":"TOW"},{"Text":"Animal Contact","Value":"014"},{"Text":"Glass Only","Value":"GLASS"},{"Text":"Wind Damage","Value":"012"},{"Text":"Flood Damage","Value":"017"},{"Text":"Hail Damage","Value":"015"},{"Text":"Cat Loss","Value":"CAT"},{"Text":"Vandalism","Value":"019"},{"Text":"Fire","Value":"013"},{"Text":"Theft","Value":"011"},{"Text":"Pedestrian","Value":"Pedestrian"},{"Text":"All Other","Value":"OTHER"}],"dataTextField":"Text","dataValueField":"Value"});});
    </script>
            </div>

            <div class="editor-label label vAlignMiddle marginTop10">
                <label>Number </label>
            </div>
            <div class="editor-field textbox inlineBlock">
                <input id="NumVehInvolved" min="1" name="NumVehInvolved" step="1" type="number" value="1" /><script>
    jQuery(function(){jQuery("#NumVehInvolved").kendoNumericTextBox({"format":"n0","decimals":0});});
    </script>
            </div>

            <br /><br />

            <div class="editor-label paddingBottom5">
                <label>Please describe </label><br /> 
            </div>
            <div class="editor-field" style="position:relative; width:305px;">
                <textarea class="k-textbox" cols="20" data-val="true" data-val-required="Required." id="Info_FactsOfLoss" maxlength="300" name="Info.FactsOfLoss" rows="2" style="height:120px; overflow-y:auto; width: 100%;font-family: Segoe UI,Arial, Helvetica, sans-serif, Tahoma; ">
    asdf</textarea>
            </div>
        
      </div>
      
    </body>
    </html>
    </code>

    <css>
    .label
    {
        width: 150px;
        height: 25px;
        display: inline-block;
    }

    .textbox
    {
        /*width: 150px;*/ /*EditorFordisplay: inline-block;*/
    }

    .inlineBlock
    {
        display: inline-block;
    }

    .vAlignMiddle
    {
        vertical-align: middle;
    }

    .marginTop10
    {
        margin-top: 10px;
    }

    .paddingBottom5
    {
        padding-bottom: 5px;
    }

    .claimLeft
    {
        float: left;
        padding: 0 12px;
        width: 400px;
        border-right: 1px solid black;
    }
    body
    {
        background-color: #CCC;
        font-family: Segoe UI;
        font-size: 12px;
        color: #333;
        padding: 0 0 0 0;
        margin: 3em 0 1em 0;
    }


    </css>
  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 12 Jun 2013 Link to this post

    Hello Jimm,

    Thank you for re-uploading the file and sharing the code you used. Here is the jsbin I created from your file:

    http://jsbin.com/inoyim/3/edit

    However I had no success reproducing the behavior using Internet Explorer 10. Here is a screen cast that shows the DropDownList is not closed.

    http://screencast.com/t/GgWIWAuW


    Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Aaron
    Aaron avatar
    14 posts
    Member since:
    Jan 2012

    Posted 05 Feb 2015 in reply to Petur Subev Link to this post

    Yes it does happen! If you look at your own js bin project in the view mode and not the edit mode and click on the dropdowns scroll it closes it. You must close all your IE browsers first, then go here http://jsbin.com/inoyim/3 and first thing click on the dropdown.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready