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

RadContentTemplateTile cursor

10 Answers 225 Views

TileList

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

MBEN asked on 24 Apr 2014, 09:36 PM

Hi,

I am using a RADContentTemplateTile on the home page on my website to provide snapshots. when the user clicks on them they navigate to the actual page.
I want to display a hand cursor when I hover over it so that the user knows that the tiles are clickable.

below is a declaration of my tile:

<telerik:RadContentTemplateTile ID="RadContentTemplateTile1" runat="server" Name="balancesTile"

Shape="Wide" NavigateUrl="~/balances/balancesummary.aspx?MenuID=2&id=0" Width="460px"

BorderStyle="None">

<ContentTemplate>

<b>Balances</b>

<p>

<bal:ucBalance ID="balanceSummary" runat="server" />

</p>

</ContentTemplate>

</telerik:RadContentTemplateTile>

Please suggest.

10 Answers, 1 is accepted

answered on 30 Apr 2014, 06:29 AM

Hi MBEN,

In order to achieve your scenario you have to mention the CSS for each control separately as follows.

ASPX:

<telerik:RadContentTemplateTile ID="RadContentTemplateTile1" runat="server">

<ContentTemplate>

<asp:Label ID="Label1" runat="server" Text="Demo">

</asp:Label>

<telerik:RadTextBox ID="RadTextBox1" runat="server">

</telerik:RadTextBox>

</ContentTemplate>

</telerik:RadContentTemplateTile>

CSS:

.rtileHovered, #RadContentTemplateTile1_Label1, #RadContentTemplateTile1_RadTextBox1

{

cursor: pointer !important;

}

Thanks,
Shinu.

answered on 30 Apr 2014, 03:27 PM

Unfortunately this doesn't work for me.
I have a user control inside my content template and a gid on that user control. Does that make a difference?

Below is my code:

<div id="borderDiv">

<table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr>

<td align="center" valign="bottom">

<asp:Panel ID="Panel1" runat="server" CssClass="panelLeft">

<telerik:RadContentTemplateTile ID="RadContentTemplateTile1" runat="server" Name="balancesTile"

Shape="Wide" NavigateUrl="~/balances/balancesummary.aspx?MenuID=2&id=0" Width="460px"

BorderStyle="None">

<ContentTemplate>

<b>Balances</b>

<p>

<iSys:ucBalance ID="balanceSummary" runat="server" />

</p>

</ContentTemplate>

</telerik:RadContentTemplateTile>

</asp:Panel>

</td>

</tr>

</table>

<br />

</div>

css I am using:

<style type="text/css">

.rtileHovered, #RadContentTemplateTile1_balanceSummary, #RadContentTemplateTile1_balanceSummary_rgBalanceSummary

{

cursor: pointer !important;

}

</style>

If that's an issue is there some other control I can use?

answered on 02 May 2014, 09:19 AM

Hello,

You could try also the following approach and choose which one is the best for you:

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

<head runat="server">

<title></title>

<style>

.RadTile:hover *,

.rtileHovered *,

.rtileHovered:hover,

.rtileContent:hover *,

.rtileHovered .rtileContent * {

cursor: pointer !important;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager runat="server"></asp:ScriptManager>

<telerik:RadContentTemplateTile ID="RadContentTemplateTile1" runat="server">

<ContentTemplate>

<asp:Label ID="Label1" runat="server" Text="Demo">

</asp:Label>

<telerik:RadTextBox ID="RadTextBox1" runat="server">

</telerik:RadTextBox>

</ContentTemplate>

</telerik:RadContentTemplateTile>

</form>

</body>

</html>

Regards,
Joana
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 05 May 2014, 07:11 PM

Hi Joana,

I was trying to add a border on hover over the tile like you have in your examples but I am not able to do so.
I am using custom skin.

Below are my control and css:

<telerik:RadContentTemplateTile ID="RadContentTemplateTile1" runat="server" Name="balancesTile"

Shape="Wide" NavigateUrl="~/balances/balancesummary.aspx?MenuID=2&id=0" Width="470px">

<ContentTemplate>

<b>Balances</b>

<p>

<iSys:ucBalance ID="balanceSummary" runat="server" />

</p>

</ContentTemplate>

</telerik:RadContentTemplateTile>

css:

.RadTile_WebBlue

{

font-family: "Segoe UI" , Arial, Helvetica, sans-serif;

font-size: 12px;

color: #333;

background-color: rgb(238, 238, 238); /* Loading image */

}

.RadTile_WebBlue.rtileSelected {

border-color: #3d556c; }

.RadTile_WebBlue.rtileSelected.rtileHovered {

border: 1px solid #B1B1B1; }

.RadTile_WebBlue div.rtileBadgeIcon {

background-image: url('../Common/Tile/rtileBadgeIconsDark.png');

_background-image: url('../Common/Tile/rtileBadgeIconsDarkIE6.png'); }

html .RadTile_WebBlue.RadTile h6.rtileTitle {

color: white; }

.RadTile_WebBlue .rtilePeekContent {

background-color: rgb(238, 238, 238); }

.RadTile_WebBlue.rtileLoading,

.RadTile_WebBlue .rtileLoading {

background-image: url('Common/loading_small.gif'); }

What am i missing

answered on 07 May 2014, 08:50 AM

Hello,

You could set the border on hover via the approach I have sent you:

.RadTile:hover *,

.rtileHovered *,

.rtileHovered:hover,

.rtileContent:hover *,

.rtileHovered .rtileContent * {

cursor: pointer !important;

border-color: #000 !important;

}

or you could set the style on .RadTile_WebBlue.rtileHovered:

.RadTile_WebBlue.rtileHovered

{

border-color: #000 !important;

}

If you wish, you could inspect the elements with FireBug or other DevTool to see their classes and how to customize them.

Regards,
Joana
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.