Switch iOS native styling

9 posts, 1 answers
  1. Alex
    Alex avatar
    23 posts
    Member since:
    Aug 2012

    Posted 18 Sep 2012 Link to this post

    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.

  2.
  3. Alex
    Alex avatar
    23 posts
    Member since:
    Aug 2012

    Posted 18 Sep 2012 Link to this post

    Small update. The example above uses 710 version, and your examples already on 913, is there an issue with switch?
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 20 Sep 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Alex
    Alex avatar
    23 posts
    Member since:
    Aug 2012

    Posted 20 Sep 2012 Link to this post

    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.
  8.
  9. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 20 Sep 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Alex
    Alex avatar
    23 posts
    Member since:
    Aug 2012

    Posted 20 Sep 2012 Link to this post

    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.
  13. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 20 Sep 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  15. Alex
    Alex avatar
    23 posts
    Member since:
    Aug 2012

    Posted 20 Sep 2012 Link to this post

    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!
  17. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 20 Sep 2012 Link to this post

    Hi Alex,

    Yes, I noticed :)

    All the best,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top