Questions on UI for ASP.NET AJAX Forum

4 answers

161 views

::before being inserted for an unknown reason

For an unknown reason ::before is being auto-inserted on some instances of RadRating but not others. How do I prevent ::before from being inserted when using RadRating?

Attached are screenshots of the user control code and the Chrome element inspector. In the code comparison attachment the code on the left auto-inserts "::before" and the code on the right does not.

Rating

answered on 22 Sep 2017

7 answers

163 views

RadRating not selectable in Safari

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"