Switch iOS native styling

[Alex]

Hi! 
In the another forum thread you post me a fiddle with a switch example, this one:
http://jsfiddle.net/7WVqL/138/ 

It looks great and native on my iPad (with rounded corners), exactly as iPad native switch.

But in my project and actually also in your examples here http://demos.kendoui.com/mobile/switch/index.html  on iPad the switch looks not native (square corners), actually like in Chrome on Windows PC.

I can not figure out, how to make iPad native like in fiddle I posted here.

PS: please to see difference, open links I posted here on ipad or simulator.

[Alex]

Small update. The example above uses 710 version, and your examples already on 913, is there an issue with switch?

[Kamen Bundev]

Hello Alex,

I'm not sure what do you mean - they are essentially the same switches. Can you post some screenshots from you iPad of both near-native and broken switches? Thank you in advance.

All the best,
Kamen Bundev
the Telerik team

[Alex]

Sure. I'v attached 3 files.
"native" - switch in my iPad's settings
"kendo" - switch from kendo application
both screenshots are from iPad with iOS 6.0

Third file is iPad 5.1 simulator from XCode on Mac.

[Kamen Bundev]

Hello Alex,

This behavior is expected - the more square like look is from iOS 4.x and the rounded one is from iOS 5.x. Kendo UI Mobile auto adjusts some small details in different iOS versions, like the Switch look and soon the NavBar look as it changed in iOS 6.x (the gradient is missing the edge - looks more like on iPad, but blue). If you want to force the iOS 5 look for all iOS platforms, check the documentation about that. Our demos are forced to use iOS 4.x look, hence what you see.

All the best,
Kamen Bundev
the Telerik team

[Alex]

Thanks for an answer.
Well, I just tried to force platform and version (just copied from example from your link) and I still have "squared" switches on iPad and in Chrome (what in chrome is changed - navbar iPad style, so forcing works, but not for the switches). 

I thought, which platform is running should be determined automatically. Just for example this fiddle I posted in the beginning of thread works differently (and correct!) on iPad with iOS 5.1 (see last screenshot)  and on Windows Chrome, and I didn't do any platform forcing on init mobile application in this fiddle. Also this fiddle uses 710Q2 version of kendo.

With a new 910 version of kendo, what I use, and with 913 version currently linked in your examples, It looks "squared"  on any devices any iOS versions and also with forced iOS5 version.

And what is about iOS6? today I've updated my iPad, will be another release for new iOS?

Thanks.

[Kamen Bundev]

Hi Alex,

Looks like the platform major CSS class that is assigned is wrong. I've fixed it and the fix will be available with the next internal build. As a workaround until then, you can load this script right after kendo.mobile.min.js. I've also updated your points for the find.

About the iOS 6 look, it will be added gradually until the next release and available in the internal builds.

Regards,
Kamen Bundev
the Telerik team

[Alex]

Thanks, that worked for me.
For iOS5 switches are correct without platform forcing , with iOS6 I need to force platform to 5th version, hope it changes in next releases.

BTW, you example here  http://docs.kendoui.com/getting-started/mobile/application#forcing-platform-styles contain an error:

<script>

    new kendo.mobile.Application($(document.body), {

        platform: {

            device: "ipad",       // Mobile device, can be "ipad", "iphone", "ipod", "android" "fire", "blackberry", "meego"

            name: "ios",          // Mobile OS, can be "ios", "android", "blackberry", "meego"

            ios: true,            // Mobile OS name as a flag

            majorVersion: 5,      // Major OS version

            minorVersion: "0.0",  // Minor OS versions

            flatVersion: "500",   // Flat OS version for easier comparison

            appMode: false        // Whether running in browser or in AppMode/PhoneGap/Titanium.

            tablet: "ipad"        // If a tablet - tablet name or false for a phone.

        }

    });

</script>

after "appMode: false" must be comma, copy-paste nerved :)

Thanks!

[Kamen Bundev]

Hi Alex,

Yes, I noticed :)

All the best,
Kamen Bundev
the Telerik team