RadRating not selectable in Safari

8 posts, 0 answers
  1. Young
    Young avatar
    15 posts
    Member since:
    Nov 2012

    Posted 02 Aug Link to this post

    When I add the following CSS to my aspx page the RadRating becomes unselectable in Safari-only (confirmed on ipad and iphone). Other browsers are fine.

    html, body {
         height: 100%;
    }

     

    This CSS is necessary on some pages that also require a RadRating tool.

    The page is running here: https://alpha.changeyourenergy.com/mgmt/Testing/radrating_no_master.aspx

    The CSS in question is located here: https://alpha.changeyourenergy.com/style/revamp.css?v=151030.01

    Note that if I tap the screen many times I can sometimes get the stars to highlight on Safari, but it is very difficult, inaccurate, and requires persistence.

    Full ASPX page (the .cs page is essentially blank and not included here)

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="radrating_no_master.aspx.cs" Inherits="mgmt_Testing_radrating_no_master" %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title>No Master</title>
     
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     
        <style type="text/css">
            .ratingClass {
                position: relative;
                top: 100px;
                text-align: left;
                margin: 0 auto;
                padding: 0;
            }
        </style>
     
        <link id="BlowdryCSS" runat="server" rel='stylesheet' type='text/css' href='/style/blowdry.css?v=151030.01' />
        <link id="RevampCSS" runat="server" rel='stylesheet' type='text/css' href='/style/revamp.css?v=151030.01' />   
     
        <link id="GoogleMaterialIcons" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
     
        <asp:Literal id="JQuery" runat="server" Text='<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>'></asp:Literal>
        <asp:Literal id="JQueryUI" runat="server" Text='<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>'></asp:Literal>
     
        <script async type="text/javascript">
            (function (i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date(); a = s.createElement(o),
            m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
            })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
            ga('create', 'UA-62909613-1', 'auto');
            ga('send', 'pageview');
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager runat="server" ID="ScriptManager1">
                <Scripts>
                    <%-- Google CDN Reference: https://developers.google.com/speed/libraries/ --%>
                    <%--<asp:ScriptReference Path="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
                    <asp:ScriptReference Path="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" />--%>
                    <%--<asp:ScriptReference Path="<%# Eval("Source.CloudRoot") + "/" + Eval("Source.OneJS") %>" />--%>
                     
                    <%--<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />--%>
     
                    <%--<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryExternal.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryPlugins.js" />--%>
                </Scripts>
            </telerik:RadScriptManager>
     
            <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="false" />
         
            <div style="height:100%">
            <telerik:RadRating RenderMode="Lightweight" ID="ratingBar" runat="server" Orientation="Horizontal" ItemHeight="24px"
                ItemWidth="20px" CssClass="ratingClass" Skin="Silk" VisibleDuringInit="false">
                <Items>
                    <telerik:RadRatingItem Value="1"
                        HoveredSelectedImageUrl="https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-dark-orange-36x54.png"
                        ToolTip="Very Low"></telerik:RadRatingItem>
                    <telerik:RadRatingItem Value="2" HoveredImageUrl="https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-dark-orange-36x54.png"
                        HoveredSelectedImageUrl="https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-dark-orange-36x54.png"
                        ToolTip="Low"></telerik:RadRatingItem>
                    <telerik:RadRatingItem Value="3" HoveredImageUrl="https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-dark-orange-36x54.png"
                        HoveredSelectedImageUrl="https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-dark-orange-36x54.png"
                        ToolTip="Medium"></telerik:RadRatingItem>
                    <telerik:RadRatingItem Value="4" HoveredImageUrl="https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-dark-orange-36x54.png"
                        HoveredSelectedImageUrl="https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-dark-orange-36x54.png"
                        ToolTip="Medium-High"></telerik:RadRatingItem>
                    <telerik:RadRatingItem Value="5"
                        HoveredSelectedImageUrl="https://s3-us-west-1.amazonaws.com/changeyourenergy/images/icon/rating-stars-dark-orange-36x54.png"
                        ToolTip="High"></telerik:RadRatingItem>
                </Items>
            </telerik:RadRating>
            </div>
        </form>
     
         
        <script type="text/javascript">     var CloudRoot = "https://d1ululg65bfe3q.cloudfront.net";</script>
        <script src="https://forms.ontraport.com/v2.4/analytics/tracking.js" type="text/javascript"></script>
        <script>        _mri = '80479'; _mr_domain = 'changeyourenergy.ontraport.com'; mrtracking();</script>
         
        <%--<script src="http://d7f84ce2.ngrok.io/vorlon.js"></script>--%>
    </body>
    </html>
  2. Rumen
    Admin
    Rumen avatar
    13278 posts

    Posted 07 Aug Link to this post

    Hello Young,

    I tested the provided setup and found that the problem is not CSS, but jQuery specific. I commented the following line 

    <%--<asp:Literal id="JQuery" runat="server" Text='<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>'></asp:Literal>--%>

    and I was able to select the items of RadRating under Safari.

    Best regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Young
    Young avatar
    15 posts
    Member since:
    Nov 2012

    Posted 08 Aug in reply to Rumen Link to this post

    We need jquery on every page of our site.

    What is your proposed solution?
  4. Rumen
    Admin
    Rumen avatar
    13278 posts

    Posted 08 Aug Link to this post

    Hello,

    Actually, jQuery is distributed built-in with RadRating and UI for ASP.NET AJAX. Check this support resource for more information: http://docs.telerik.com/devtools/aspnet-ajax/general-information/using-jquery/using-jquery#telerik-ui-controls-using-jquery

    Regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Young
    Young avatar
    15 posts
    Member since:
    Nov 2012

    Posted 08 Aug in reply to Rumen Link to this post

    The site breaks when I use the Telerik version of jquery.  Do you know what might cause this?
  6. Rumen
    Admin
    Rumen avatar
    13278 posts

    Posted 09 Aug Link to this post

    Hello,

    What error do you get when the site breaks?

    The site could be built with a version newer than the one distributed with Telerik UI for ASP.NET AJAX. You can disable the embedded jQuery in the Telerik components and enable a newer version of jQuery - as shown in this article: http://docs.telerik.com/devtools/aspnet-ajax/controls/scriptmanager/disabling-the-embedded-jquery

    Regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Young
    Young avatar
    15 posts
    Member since:
    Nov 2012

    Posted 09 Aug Link to this post

    When I use only the Telerik version of jQuery...

    All of the jquery dependant plugins, custom code, and the javascript code associated with the Zurb Foundation CSS/JS framework stop working.

    I tried disabling the Telerik version of jQuery using web.config and by using the <asp:ScriptReference>.  Neither fixed the ipad, iphone, and safari problem.

    It is disappointing that Safari is not fully supported.

  8. Rumen
    Admin
    Rumen avatar
    13278 posts

    Posted 09 Aug Link to this post

    Hi,

    RadRating works fine with jQuery version 1.11.1 under Safari as you can see in the live demos of the control.

    Does your version of Zurb support jQuery 1.11.1?

    Can you test the rating with jQuery 3.2.1 and see whether the Zurb framework will work with it.

    Regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top