Select inputs on older Android (2)

11 posts, 0 answers
  1. Mat-Moo
    Mat-Moo avatar
    103 posts
    Member since:
    Nov 2012

    Posted 05 Feb 2013 Link to this post

    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. 
  2. Kristian D. Dimitrov
    Admin
    Kristian D. Dimitrov avatar
    68 posts

    Posted 05 Feb 2013 Link to this post

    Hi Mat-Moo,

    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. 

    Greetings,
    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.
  3. Mat-Moo
    Mat-Moo avatar
    103 posts
    Member since:
    Nov 2012

    Posted 05 Feb 2013 Link to this post

    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!
  4. Jordan
    Admin
    Jordan avatar
    197 posts

    Posted 06 Feb 2013 Link to this post

    Hi Mat-Moo,

    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,

    Jordan
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  5. Mat-Moo
    Mat-Moo avatar
    103 posts
    Member since:
    Nov 2012

    Posted 06 Feb 2013 Link to this post

    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 :(
  6. Mat-Moo
    Mat-Moo avatar
    103 posts
    Member since:
    Nov 2012

    Posted 08 Feb 2013 Link to this post

    Can you / have you tried kendo with longer lists, e.g. 30 items etc.? Does it work ok?
  7. Kristian D. Dimitrov
    Admin
    Kristian D. Dimitrov avatar
    68 posts

    Posted 11 Feb 2013 Link to this post

    Hello Mat-Moo,

    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>
    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.
  8. Mat-Moo
    Mat-Moo avatar
    103 posts
    Member since:
    Nov 2012

    Posted 11 Feb 2013 Link to this post

    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.
  9. Mat-Moo
    Mat-Moo avatar
    103 posts
    Member since:
    Nov 2012

    Posted 12 Feb 2013 Link to this post

    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?
  10. Jordan
    Admin
    Jordan avatar
    197 posts

    Posted 12 Feb 2013 Link to this post

    Hello MatMoo,

    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,

    Jordan
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  11. Mat-Moo
    Mat-Moo avatar
    103 posts
    Member since:
    Nov 2012

    Posted 12 Feb 2013 Link to this post

    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.
Back to Top