Slider not working on mobile(iPhone)

11 posts, 0 answers
  1. Ankit
    Ankit avatar
    4 posts
    Member since:
    Mar 2012

    Posted 16 Aug 2018 Link to this post

    Are there any updates on this topic ? Since I am using Kendo UI slider with razor view having version 2017.2.621.545 and I am not able to get it works in mobile devices specially on iPhone.
    The code is as follows - 
     @(Html.Kendo().SliderFor(m => m.PercentChanceClose)
                            .Name("PercentChanceClose")
                            .ShowButtons(true)
                            .Tooltip(true)
                            .Max(100)
                            .Min(0)
                            .SmallStep(5)
                            .LargeStep(10)
                            .Events( e => e.Change("SliderChange"))
                            .IncreaseButtonTitle("Perecent(%) Chance Close")
                            .HtmlAttributes(new { @class = "form-control"})
                            )

    JavaScript function - 

     function SliderChange(e) {

            if (e== null) {
                SliderValue(50);
            }
            else {
                SliderValue(e.value);
            }

        }


        function SliderValue(x) {
            var top = $("#PercentChanceClose").closest(".k-slider-wrap");

            if (x >= 0 && x <= 24) {
                $(".k-slider-track", top).css("background-color", "#00ff00");
                $(".k-slider-selection", top).css("background-color", "#00ff00");
              }
            else if (x >= 25 && x <= 74) {
                $(".k-slider-track", top).css("background-color", "#ffa500");
                $(".k-slider-selection", top).css("background-color", "#ffa500");
            }
            else {
                $(".k-slider-track", top).css("background-color", "#ff0000");
                $(".k-slider-selection", top).css("background-color", "#ff0000");
            }
        }

     

  2. Martin
    Admin
    Martin avatar
    833 posts

    Posted 20 Aug 2018 Link to this post

    Hello,

    I have tested the provided sample code with the latest version of the Kendo UI MVC wrappers (2018.2.620.545) and it seems to work as expected on my iPhone. Could you provide some more details what issues you are facing?

    Regards,
    Martin
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Ankit
    Ankit avatar
    4 posts
    Member since:
    Mar 2012

    Posted 21 Aug 2018 in reply to Martin Link to this post

    Thanks Martin for the reply, for some site functionality restriction I would not be able to update our site to latest Kendo UI MVC wrapper version; Would it be possible for you to play with the version which I mentioned "2017.2.621.545" for slider on iPhone? I have attached 3 screenshots for same slider behave differently on mobile and desktop.
  4. Martin
    Admin
    Martin avatar
    833 posts

    Posted 22 Aug 2018 Link to this post

    Hello,

    I have tested with "2017.2.621.545" version as well and it is still looks fine on my device. Guessing from the images you sent, I suspect that some layout/styling settings might cause the problem. To further investigate on this issue we will need either a runnable project that we can debug locally, or at least a live URL where we can inspect the layout of the page.

    Regards,
    Martin
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Norm
    Norm avatar
    6 posts
    Member since:
    May 2017

    Posted 11 Feb 2019 in reply to Martin Link to this post

    Bump!   I'm having the exact same issue.   Did you ever figure out the problem? 
  6. Martin
    Admin
    Martin avatar
    833 posts

    Posted 13 Feb 2019 Link to this post

    Hello,

    As stated in a previous post we can't confirm this behavior on our side neither with latest nor with the reported Kendo version. Please consider assembling a runnable demo that demonstrates the problem, and we will give our best to fix it as soon as possible.

    Regards,
    Martin
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Norm
    Norm avatar
    6 posts
    Member since:
    May 2017

    Posted 23 Apr 2019 in reply to Martin Link to this post

    here is a Dojo example.   Open it using an apple product and you will not see the slider anymore.  Works fine on linux or PC environment.    

     

    https://dojo.telerik.com/@normpetroff/omAQObeV

     

  8. Dimitar
    Admin
    Dimitar avatar
    463 posts

    Posted 25 Apr 2019 Link to this post

    Hello Norm,

    Thank you for providing an isolated Dojo snippet. The issue is reproducible with it on our side.
    After identifying the exact issue, I found out that we have it already logged, but its current title suggests it regards a very special case. As it turns out, the case is more general - having Slider inside Window and viewing them on iOS - screenshot. I increased issue's priority based on the two reports in this thread. And I will update the issue title and description to include this more general reproduction scenario. You may subscribe to this issue to receive updates on its progress. Currently there is no known workaround for it and if we find some, we will include it in the issue.

    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. Dimitar
    Admin
    Dimitar avatar
    463 posts

    Posted 25 Apr 2019 Link to this post

    Hello again,

    After further issue isolation it turns out that it is reproducible only if kendo.mobile.all.min.css is loaded on the page. Without it the issue is not reproducible - Dojo.

    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  10. Norm
    Norm avatar
    6 posts
    Member since:
    May 2017

    Posted 26 Apr 2019 in reply to Dimitar Link to this post

    I need to use the kendo.mobile.all.min.css for switches that I have on the page.  :(   

    I thank you for your update.  I will subscribe and wait for a fix. 

  11. Dimitar
    Admin
    Dimitar avatar
    463 posts

    Posted 26 Apr 2019 Link to this post

    Hi Norm,

    We have release a non-mobile Switch in R1 2019 - demos. It does not require mobile.css - Dojo

    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top