This question is locked. New answers and comments are not allowed.
I have a couple of screens that consist of a a list of labels and selects, this works fine on IOS devices that I've tested and Android 4 devices, but on the couple of Android 2 devices (2.1 and 2.3) I have these list go a bit mad. The first selector seems ok, but then as you scroll down the page and try to change anything it goes wrong
I've created a project called "select" that you can try and see the issue yourself. The first select works find, but when you scroll down the page then select anything, your stuck not being able to select the correct row, and you are then unable to scroll fully back to the top of the page either.
I've created a project called "select" that you can try and see the issue yourself. The first select works find, but when you scroll down the page then select anything, your stuck not being able to select the correct row, and you are then unable to scroll fully back to the top of the page either.
10 Answers, 1 is accepted
0
Hi Mat-Moo,
Kristian D. Dimitrov
the Telerik team
Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
This may be hard under Android you can read more about it here.
In short you can use Kendo DropDownList replacements to make a view with multiple drop-downs.
Kristian D. Dimitrov
the Telerik team
Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
0
Mat-Moo
Top achievements
Rank 1
Rank 1
answered on 05 Feb 2013, 08:54 PM
Hmm, that makes life awkward... DropDownlist is not part of mobile, so how do I get it? Can I use anything else to restyle them, e.g. http://labs.abeautifulsite.net/jquery-selectBox/ or is this more an issue with the war cordova works
PS Thank you for all your support!
PS Thank you for all your support!
0
Hi Mat-Moo,
the Telerik team
Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
DropDownList is part of Kendo Web package and you can get it at our dedicated www.kendoui.com site I mentioned when you are asking for a newer version of Kendo Mobile. Here is a link to sample page that demonstrates all widgets included in Web package and there is a purchasing link on the top if you want to consider buying it.
You can for sure get it done using any alternative solution including jQuery, just test well especially on Android devices as there are some quirks and twists.
Regards,
the Telerik team
Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
0
Mat-Moo
Top achievements
Rank 1
Rank 1
answered on 06 Feb 2013, 11:07 PM
Hi Jordan
I had a play about with a jquery one, however this doesn't work with long lists in the select, but otherwise did work as I had hoped.
I need to get a copy via my trial and try it out, especially with a longer list, but $399 is quite a big hit for just one component :(
I had a play about with a jquery one, however this doesn't work with long lists in the select, but otherwise did work as I had hoped.
I need to get a copy via my trial and try it out, especially with a longer list, but $399 is quite a big hit for just one component :(
0
Mat-Moo
Top achievements
Rank 1
Rank 1
answered on 08 Feb 2013, 09:58 PM
Can you / have you tried kendo with longer lists, e.g. 30 items etc.? Does it work ok?
0
Hello Mat-Moo,
All the best,
Kristian D. Dimitrov
the Telerik team
Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
I changed your sample to use Kendo drop-down (using just for the example CDN reference to Kendo Web).
You can test how it behaves on your target devices. The current sample has 40 drop-down items and our brief test was successfull on Androif 2.x, 4.x and iOS.
You can play with it and see yourself. Hope this will help you to decide.
<!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8" /> <script src="cordova.js"></script> <script src="kendo/js/jquery.min.js"></script> <script src="kendo/js/kendo.mobile.min.js"></script> <script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script> <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" /> <link href="styles/main.css" rel="stylesheet" /> <style> ul.moo { padding: 0px; margin: 0px; } ul.moo li { list-style: none; } ul.moo li.title { width: 90%; padding: 5% 8px; font-size: 1.2em; font-weight: bold; } ul.moo li select { width: 90%; padding: 5% 8px; padding: 8px; } </style> </head> <body> <div data-role="view" id="tabstrip-home" data-title="Hello World!"> <h1>Welcome!</h1> <p> Icenium™ enables you to build cross-platform device applications regardless of your development platform by combining the convenience of a local development toolset with the power and flexibility of the cloud. </p> <ul class="moo"> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> <li class="title">Title</li> <li><select class=".select"><option>12345</option><option>23456</option><option>34567</option></select></li> </ul> </div> <div data-role="layout" data-id="mobile-tabstrip"> <header data-role="header"> <div data-role="navbar"> <span data-role="view-title"></span> </div> </header> <div data-role="footer"> <div data-role="tabstrip"> <a href="#tabstrip-home" data-icon="home">Home</a> </div> </div> </div> <script> var app = new kendo.mobile.Application(document.body); $("select").kendoDropDownList(); </script> </body></html>Kristian D. Dimitrov
the Telerik team
Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
0
Mat-Moo
Top achievements
Rank 1
Rank 1
answered on 11 Feb 2013, 09:02 PM
Thanks, left my Android 2 phone in my drawer at work today so can't test. One issue I did have a problem with is when the select options is longer than the screen, scrolling and selecting became problematic using a jquery select - not sure if this is something you tried or if I will discover tomorrow.
0
Mat-Moo
Top achievements
Rank 1
Rank 1
answered on 12 Feb 2013, 11:39 AM
Ok, tried your demo (thanks), and seems to work quite well :)
However, from what I can tell this is an issue within the KendoUI Mobile framework? As raw html works, jquery framework works, but kendoUI mobile doesn't work? So is this an issue that will be addresses/fixed or is an non-fixable issue with KendoUI mobile?
However, from what I can tell this is an issue within the KendoUI Mobile framework? As raw html works, jquery framework works, but kendoUI mobile doesn't work? So is this an issue that will be addresses/fixed or is an non-fixable issue with KendoUI mobile?
0
Hello MatMoo,
the Telerik team
Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
This is limitation of forms in Kendo Mobile framework at the moment Kendo team is aware of it and already spent countless hours looking for a proper solution without sacrificing functionality. Also if I recall correct it is a browser engine bug for Android < 2.3.5 so have some mercy on us as we have limited options in this case. We will keep looking for a solution, but can not tell when we will find one!
Greetings,
the Telerik team
Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
0
Mat-Moo
Top achievements
Rank 1
Rank 1
answered on 12 Feb 2013, 07:50 PM
Jordan
plenty of mercy from me honest, I've been developing for many a year :) if you read my post as a blame / shout /fix it now, I apologise as this is not the case. It's more a case of trying to fully understand what limits are where for other projects etc. I originally thought with was a cordova issue you see, not a kendo mobile ui limitation.
What I need to decide is if its worth purchasing kendo so that I can fix android 2.x or to just not support them...
Trust me I'm waiting to sign up and pay you guys for awesome icenium.
plenty of mercy from me honest, I've been developing for many a year :) if you read my post as a blame / shout /fix it now, I apologise as this is not the case. It's more a case of trying to fully understand what limits are where for other projects etc. I originally thought with was a cordova issue you see, not a kendo mobile ui limitation.
What I need to decide is if its worth purchasing kendo so that I can fix android 2.x or to just not support them...
Trust me I'm waiting to sign up and pay you guys for awesome icenium.