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

RadRating not selectable in Safari

7 Answers 163 Views

Rating

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

Young asked on 02 Aug 2017, 09:18 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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"

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"