Styling of Kendo Mobile Switch

2 posts, 1 answers
  1. Answer
    Jean
    Jean avatar
    8 posts
    Member since:
    Aug 2011

    Posted 28 Sep 2013 Link to this post

    I have tried this a couple of ways but the styling of the switch is not right.  First with the "Blank" template and manually adding my own kendo files, and then with the Kendo Mobile template.  The result is the same with both templates and also with the flat skin.

    http://jsfiddle.net/jeangentile/nnXQm/

    Kendo UI Mobile 2013.2.918
    Jquery 1.9.1
    Cordova 3.0

    In all cases, the "on" position of the switch seems to be too far to the right, leaving some of the "off" background visible.

    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <link rel="stylesheet" type="text/css" href="kendo/kendo.icenium.min.css" />
            <title>Hello World</title>
        </head>
        <body>
            
            <div class="app">
                <ul>
                    <li>Password never expires <input id="wink-switch" /></li>
                </ul>
            </div>

            <script type="text/javascript" src="cordova.js"></script>
            <script src="kendo/jquery.min.js"></script>
            <script src="kendo/kendo.mobile.min.js"></script>

            <script type="text/javascript">

                var mobileApp = new kendo.mobile.Application(document.body, { 
                    skin: "flat"
                });
                
                $("#wink-switch").kendoMobileSwitch();
            
            </script>
        </body>
    </html>






  2. Jean
    Jean avatar
    8 posts
    Member since:
    Aug 2011

    Posted 29 Sep 2013 Link to this post

    Found the answer here - probably something I should have known a long time ago:  I should not initialize my Kendo objects until the specific data-view itself is being initialized.

    Two possible ways to address this, both of which worked:

    1)  Add data-role="switch" to the input element
    or
    2) Move $("#wink-switch").kendoMobileSwitch(); into a function and add that function to "data-init" in the VIEW

Back to Top