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

[Solved] Menu Right Arrow image is not woriking in Chrome

8 Answers 145 Views

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

nsrikanth 2009 asked on 01 Jan 2014, 04:51 AM

Menu.png

hi

Menu right Arrow image is not working in chrome , it is working fine IE. we are using 2010.1.519.35. we are using following CSS for Right Arrow

.rmVertical .rmExpandRight
{

   background: transparent url('../../images/MenuRightArrow.gif') no-repeat right right !important;

}

i tried url base 64 also it is not working , please suggest me the solution

8 Answers, 1 is accepted

answered on 02 Jan 2014, 05:59 AM

Hi,

Please have a look into the sample code snippet which works fine at my end.

ASPX:

<telerik:RadMenu ID="Rad1" runat="server" Flow="Vertical">

<Items>

<telerik:RadMenuItem Text="T1" runat="server">

<GroupSettings ExpandDirection="Right" Flow="Vertical" />

<Items>

<telerik:RadMenuItem Text="t1.1" runat="server">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="t1.2" runat="server">

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="t1.3" runat="server">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

CSS:

<style type="text/css">

.RadMenu .rmVertical .rmExpandRight

{

background: transparent url('plus.gif') no-repeat !important;

}

</style>

Please provide your full code with CSS if it doesn't help.
Thanks,
Shinu.

answered on 03 Jan 2014, 03:16 AM

menu.png

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!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></title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<link href="Menu.css" rel="stylesheet" type="text/css" />

<body>

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

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<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.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<div>

<telerik:RadMenu id="RadMenu1" runat="server" EnableShadows="true"

Width="100%" EnableRoundedCorners="true" EnableSelection="false"

CollapseAnimation-Type="none">

</telerik:RadMenu>

</div>

</form>

</body>

</html>

using System;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Configuration;

using System.Web.Security;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Telerik.Web.UI;

using System.Xml;

public partial class Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

string path = HttpContext.Current.Server.MapPath(".");

XmlTextReader reader = new XmlTextReader(path + "\\s.xml");

XmlDocument doc = new XmlDocument();

XmlNode node;

try

{

doc.Load(reader);

}

catch (Exception)

{

reader.Close();

}

finally

{

reader.Close();

}

RadMenu1.LoadXml(doc.InnerXml);

}

.MainMenu

{

background-color: #4687CC;

height : 22px;

text-align: center;

}

A.MainMenuItem:visited

{

padding: 2 2 2 2;

font-family: Arial, Tahoma, Geneva, Arial, Helvetica, sans-serif;

text-decoration: none;

color: #FFFFFF;

font-size: 8pt;

font-weight: normal;

}

A.MainMenuItem:link

{

padding: 2 2 2 2;

font-family: Arial, Tahoma, Geneva, Arial, Helvetica, sans-serif;

text-decoration: none;

color: #FFFFFF;

font-size: 8pt;

}

A.MainMenuItem:hover

{

padding: 2 2 2 2;

font-family: Arial, Tahoma, Geneva, Arial, Helvetica, sans-serif;

text-decoration: none;

color: #FFFFFF;

font-size: 8pt;

background: #4687CC;

font-weight: bold;

}

.menuDropDownMenu

{

LEFT: -1000px;

OVERFLOW: hidden;

POSITION: absolute;

TOP: -1000px;

COLOR: #000000;

font-size: 10px;

}

.menuDropDownMenu .content

{

POSITION: absolute;

COLOR: #000000;

font-size: 10px;

}

.menuDropDownMenu .items

{

BORDER-RIGHT: steelblue 1px solid;

BORDER-TOP: steelblue 0px solid;

Z-INDEX: 2;

LEFT: 0px;

BORDER-LEFT: steelblue 1px solid;

BORDER-BOTTOM: steelblue 0px solid;

POSITION: relative;

TOP: 0px;

COLOR: #000000;

font-size: 10px;

}

.menuDropDownMenu .item

{

background-color: #B0C4DE;

BORDER-RIGHT: medium none;

BORDER-TOP: medium none;

FONT-SIZE: 8pt;

BORDER-LEFT: medium none;

cursor: hand;

BORDER-BOTTOM: medium none;

FONT-FAMILY: Arial, Tahoma, Geneva, Arial, Helvetica, sans-serif;

TEXT-DECORATION: none;

font-weight: normal;

color: #000000;

font-size: 10px;

}

.menuDropDownMenu .background

{

COLOR: #000000;

Z-INDEX: 1;

LEFT: 0px;

POSITION: absolute;

TOP: 0px;

font-size: 10px;

}

.menuDropDownMenu .shadowRight

{

Z-INDEX: 3;

WIDTH: 0px;

POSITION: absolute;

TOP: 0px;

font-size: 10px;

}

.menuDropDownMenu .shadowBottom

{

Z-INDEX: 1;

LEFT: 0px;

POSITION: absolute;

HEIGHT: 0px;

font-size: 10px;

}

.menuDropDownMenu .hover

{

BACKGROUND: #4687CC;

FONT-SIZE: 8pt;

FONT-FAMILY: Arial, Tahoma, Geneva, Arial, Helvetica, sans-serif;

font-size: 10px;

}

#ConfigurationPanel1 ul

{

list-style:none;

margin:10px 0 0 0;

padding:0;

height: 30px;

}

#ConfigurationPanel1 ul label

{

display:inline-block;

padding: 0 10px;

}

#ConfigurationPanel1 h3

{

font: 13px 'Segoe UI', Arial, 'sans-serif';

color:#B0C4DE !important;

clear:both;

display:block;

margin:0;

}

#ConfigurationPanel1 #ApplySettingsButton

{

clear:both;

display:block;

margin:0 0 10px auto;

}

#ConfigurationPanel1 .animation-settings

{

border-left:1px solid #B0C4DE !important;

width: 324px;

float: left;

padding-left: 20px;

}

#ConfigurationPanel1 .general-settings

{

float: left;

width: 280px;

}

#ConfigurationPanel1 .animation-settings li

{

float:left;

}

#ConfigurationPanel1 .general-settings li

{

padding-bottom: 10px;

}

.menu-container .RadMenu

{

float:none;

}

.MenuClass

{

background-color:#B0C4DE !important;

}

.rmRootGroup

{

background:#4687cc !important;

}

.rmLink

{

font-family: Arial, Tahoma, Geneva, Arial, Helvetica, sans-serif !important;

text-decoration: none !important;

background-color: #B0C4DE !important;

background-image:none !important;

}

.rmLink:hover

{

padding: 2 2 2 2;

font-family: Arial, Tahoma, Geneva, Arial, Helvetica, sans-serif !important;

text-decoration: none !important;

background: #4687CC !important;

background-color: #4687CC !important;

cursor: hand !important;

font-weight: bold !important;

}

.rmHorizontal, .rmItem

{

border-right: 1px solid white !important;

}

.rmHorizontal, .rmLast

{

border-right: 0 !important;

}

.rmText

{

background-image: none !important;

}

.rmRootLinkMenu

{

background:#4687CC !important ;

cursor: hand !important;

white-space:normal !important;

text-align: center !important;

}

.rmExpanded,

.rmExpanded:hover

{

background-image:none !important;

background-color:#4687CC !important;

}

.rmLink:hover

{

font-family: Arial, Tahoma, Geneva, Arial, Helvetica, sans-serif !important;

text-decoration: none !important;

background: #4687CC !important;

background-color: #4687CC !important;

cursor: hand !important;

font-weight: bold !important;

color:White !important;

}

.rmText

{

font-family: Arial, Tahoma, Geneva, Arial, Helvetica, sans-serif !important;

font-size: 8pt !important;

}

.rmText:hover

{

font-family: Arial, Tahoma, Geneva, Arial, Helvetica, sans-serif !important;

text-decoration: none !important;

background: #4687CC !important;

background-color: #4687CC !important;

cursor: hand !important;

font-weight: bold !important;

}

.rmVertical .rmExpandRight

{

background: transparent url('MenuRightArrow.gif') no-repeat right right !important;

}

<?xml version="1.0" encoding="utf-8" ?>

<Menu>

<Group>

<Item Text="File" Key="F" >

<Group>

<Item Text="New" />

<Item Text="Open">

<Group Width="140" Flow="Vertical">

<Item Text="Project" />

<Item Text="Project From Web" />

<Item Text="File" />

<Item Text="File from Web" />

</Group>

</Item>

<Item Text="PostBack Item" PostBack="True"/>

<Item IsSeparator="True" />

<Item Text="ToolTip Item" ToolTip="This is a tooltip" />

<Item Text="Add Existing Item" />

<Item Text="Add Project" />

</Group>

</Item>

<Item Text="Edit" AccessKey="E" >

<Group Flow="Vertical">

<Item Text="Undo" />

<Item Text="Redo" Enabled="False" />

<Item Text="Cut" />

<Item Text="Copy" />

<Item Text="Paste" />

</Group>

</Item>

<Item Text="View" AccessKey="V" >

<Group Flow="Vertical">

<Item Text="Open" />

<Item Text="Open With" />

<Item Text="Toolbox">

<Group>

<Item Text="Project" />

<Item Text="Project From Web" />

<Item Text="File" />

<Item Text="File from Web" />

</Group>

</Item>

<Item Text="Resource View" />

<Item Text="Properties" />

</Group>

</Item>

<Item Text="Help" Key="H" >

<Group Flow="Vertical" OffsetX="-26">

<Item Text="Index" />

<Item Text="Search" />

<Item Text="Online" />

<Item Text="Telerik Home Page" Href="http://www.telerik.com" />

</Group>

</Item>

</Group>

</Menu>

we are using XML binding to menu control , it is working fine IE. can please check code once

Thanks
Narala