This is a migrated thread and some comments may be shown as answers.

Styling of Kendo Mobile Switch

1 Answer 200 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Jean
Top achievements
Rank 1
Jean asked on 29 Sep 2013, 03:47 AM
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>






1 Answer, 1 is accepted

Sort by
0
Jean
Top achievements
Rank 1
answered on 29 Sep 2013, 12:14 PM
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

Tags
General Discussions
Asked by
Jean
Top achievements
Rank 1
Answers by
Jean
Top achievements
Rank 1
Share this question
or