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
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
4 Answers, 1 is accepted
0
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
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!
0
Jimm
Top achievements
Rank 1
Rank 1
answered on 10 Jun 2013, 01:08 PM
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>
<!--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>
0
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
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!
0
Aaron
Top achievements
Rank 1
Rank 1
answered on 05 Feb 2015, 11:28 PM
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.