Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Menu Right Arrow image is not woriking in Chrome

8 Answers 62 Views
Menu
This is a migrated thread and some comments may be shown as answers.
nsrikanth 2009
Top achievements
Rank 1
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

Sort by
0
Shinu
Top achievements
Rank 2
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.
0
nsrikanth 2009
Top achievements
Rank 1
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">
 
<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
0
Shinu
Top achievements
Rank 2
answered on 03 Jan 2014, 05:45 AM
Hi,

Unfortunately I couldn't replicate the issue at my end. The give code is working fine for me. One  suggestion is that you can upgrade the telerik version to show the RightArrow image on the Menu Item which have Child Items. This will automatically added in the RadMenu, no need to write the code for showing the arrow.

Thanks,
Shinu.
0
nsrikanth 2009
Top achievements
Rank 1
answered on 03 Jan 2014, 09:18 AM
hi Shinu
is there any other alternative solution because our team will not accept Telerik upgrade. if any other solution please

Thanks
Narala
0
Shinu
Top achievements
Rank 2
answered on 07 Jan 2014, 03:26 AM
Hi,

I have tried your code and the RightArrow image on the Menu was showing for me in the older version itself. Unfortunately I cannot suggest an alternative with the given information. With Telerik upgrades you will get the latest features and fixes and make your development easier.

Thanks,
Shinu.
0
nsrikanth 2009
Top achievements
Rank 1
answered on 07 Jan 2014, 06:03 AM
Hi

in IE it is working fine for me also , in chrome we are not getting Right Arrow image .

can you please send me that sample project ,  i will test once

Thanks
Narala
0
Shinu
Top achievements
Rank 2
answered on 07 Jan 2014, 07:57 AM
Hi,

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

Thanks,
Shinu.
0
nsrikanth 2009
Top achievements
Rank 1
answered on 07 Jan 2014, 09:11 AM
hi

thanks , can you please send me the sample in .NET framework 3.5 . i am unable to test your sample because we are using VS2008

Please ...

Thanks
Narala

Tags
Menu
Asked by
nsrikanth 2009
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
nsrikanth 2009
Top achievements
Rank 1
Share this question
or