Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET > Menu > Images Only Problem - RTL
RadControls for ASP.NET are no longer supported (see this page for reference). In case you have inquiries about the Telerik ASP.NET AJAX controls, post them in the pertinent ASP.NET AJAX forums.

Not answered Images Only Problem - RTL

Feed from this thread
  • Bader Master avatar

    Posted on Jan 22, 2011 (permalink)

    Hello,

    I'm trying to build my own RTL radmenu based on the following demo:
    http://demos.telerik.com/aspnet-ajax/menu/examples/appearance/imageonly/defaultcs.aspx
    So before I started to that I just copied the demo code to my page (Which is defined as rtl page)
    Here is the radmenu code (I added the property dir="rtl"):
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="HeaderMenuWebUserControl.ascx.cs" Inherits="Common_UserControls_HeaderMenu_HeaderMenuWebUserControl" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
      
    <style type="text/css">
        div.RadMenu a.rmLink .rmLeftImage
        {
            position: relative;
             
        }
              
        div.RadMenu .rmItem .rmLink .rmLeftImage,
        div.RadMenu .rmItem .rmLink,
        div.RadMenu .rmLink .rmText
        {
            margin: 0;
            padding: 0;
        }
    </style>
      
    <div dir="rtl">
        <telerik:RadMenu ID="RadMenu1" runat="server" Skin="" EnableImagePreloading="true" dir="rtl" Style="margin-top:100px;" Width="952px"
            DefaultGroupSettings-OffsetY="-1">
            <Items>
                <telerik:RadMenuItem ImageUrl="Imgs/Products.gif" HoveredImageUrl="Imgs/Products_hov.gif"
                    ExpandedImageUrl="Imgs/Products_hov.gif" ToolTip="Products">
                    <Items>
                        <telerik:RadMenuItem ImageUrl="Imgs/Products/1.gif"  HoveredImageUrl="Imgs/Products/1_hov.gif"
                            ToolTip="RadControls for ASP.NET Ajax" />
                        <telerik:RadMenuItem ImageUrl="Imgs/Products/2.gif" HoveredImageUrl="Imgs/Products/2_hov.gif"
                            ToolTip="WinForms Controls" />
                        <telerik:RadMenuItem ImageUrl="Imgs/Products/3.gif" HoveredImageUrl="Imgs/Products/3_hov.gif"
                            ToolTip="WPF Controls" />
                        <telerik:RadMenuItem ImageUrl="Imgs/Products/4.gif" HoveredImageUrl="Imgs/Products/4_hov.gif"
                            ToolTip="Silverlight Controls" />
                        <telerik:RadMenuItem ImageUrl="Imgs/Products/5.gif" HoveredImageUrl="Imgs/Products/5_hov.gif"
                            ToolTip="Telerik Reporting" />
                        <telerik:RadMenuItem ImageUrl="Imgs/Products/6.gif" HoveredImageUrl="Imgs/Products/6_hov.gif"
                            ToolTip="Telerik OpenAccess ORM" />
                        <telerik:RadMenuItem ImageUrl="Imgs/Products/7.gif" HoveredImageUrl="Imgs/Products/7_hov.gif"
                            ToolTip="Sitefinity ASP.NET CMS" />
                        <telerik:RadMenuItem ImageUrl="Imgs/Products/8.gif" HoveredImageUrl="Imgs/Products/8_hov.gif"
                            ToolTip="WebUI TestStudio" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem ImageUrl="Imgs/Purchase.gif" HoveredImageUrl="Imgs/Purchase_hov.gif"
                    ExpandedImageUrl="Imgs/Purchase_hov.gif" ToolTip="Purchase">
                    <Items>
                        <telerik:RadMenuItem ImageUrl="Imgs/Purchase/1.gif" HoveredImageUrl="Imgs/Purchase/1_hov.gif"
                            ToolTip="Buy Now" />
                        <telerik:RadMenuItem ImageUrl="Imgs/Purchase/2.gif" HoveredImageUrl="Imgs/Purchase/2_hov.gif"
                            ToolTip="Renewals and Upgrades" />
                        <telerik:RadMenuItem ImageUrl="Imgs/Purchase/3.gif" HoveredImageUrl="Imgs/Purchase/3_hov.gif"
                            ToolTip="License Agreement" />
                        <telerik:RadMenuItem ImageUrl="Imgs/Purchase/4.gif" HoveredImageUrl="Imgs/Purchase/4_hov.gif"
                            ToolTip="FAQ" />
                        <telerik:RadMenuItem ImageUrl="Imgs/Purchase/5.gif" HoveredImageUrl="Imgs/Purchase/5_hov.gif"
                            ToolTip="Purchase Orders" />
                        <telerik:RadMenuItem ImageUrl="Imgs/Purchase/6.gif" HoveredImageUrl="Imgs/Purchase/6_hov.gif"
                            ToolTip="Contact Sales" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem ImageUrl="Imgs/Community.gif" HoveredImageUrl="Imgs/Community_hov.gif"
                    ExpandedImageUrl="Imgs/Community_hov.gif" ToolTip="Community">
                    <Items>
                        <telerik:RadMenuItem ImageUrl="Imgs/Community/1.gif" HoveredImageUrl="Imgs/Community/1_hov.gif"
                            ToolTip="Forums" />
                        <telerik:RadMenuItem ImageUrl="Imgs/Community/2.gif" HoveredImageUrl="Imgs/Community/2_hov.gif"
                            ToolTip="Blogs" />
                        <telerik:RadMenuItem ImageUrl="Imgs/Community/3.gif" HoveredImageUrl="Imgs/Community/3_hov.gif"
                            ToolTip="Events" />
                        <telerik:RadMenuItem ImageUrl="Imgs/Community/4.gif" HoveredImageUrl="Imgs/Community/4_hov.gif"
                            ToolTip="Code Library" />
                        <telerik:RadMenuItem ImageUrl="Imgs/Community/5.gif" HoveredImageUrl="Imgs/Community/5_hov.gif"
                            ToolTip="Learning Resources" />
                        <telerik:RadMenuItem ImageUrl="Imgs/Community/6.gif" HoveredImageUrl="Imgs/Community/6_hov.gif"
                            ToolTip="Announcements" />
                        <telerik:RadMenuItem ImageUrl="Imgs/Community/7.gif" HoveredImageUrl="Imgs/Community/7_hov.gif"
                            ToolTip="Free Products" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem ImageUrl="Imgs/Corporate.gif" HoveredImageUrl="Imgs/Corporate_hov.gif"
                    ExpandedImageUrl="Imgs/Corporate_hov.gif" ToolTip="Corporate">
                    <Items>
                        <telerik:RadMenuItem ImageUrl="Imgs/Corporate/1.gif" HoveredImageUrl="Imgs/Corporate/1_hov.gif"
                            ToolTip="About Telerik" />
                        <telerik:RadMenuItem ImageUrl="Imgs/Corporate/2.gif" HoveredImageUrl="Imgs/Corporate/2_hov.gif"
                            ToolTip="Press Center" />
                        <telerik:RadMenuItem ImageUrl="Imgs/Corporate/3.gif" HoveredImageUrl="Imgs/Corporate/3_hov.gif"
                            ToolTip="Careers" />
                        <telerik:RadMenuItem ImageUrl="Imgs/Corporate/4.gif" HoveredImageUrl="Imgs/Corporate/4_hov.gif"
                            ToolTip="Contact Us" />
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
    </div>

    I'm trying to display the RadMenu in RTL mode, but the result is that the RadMenu items hides each other (Plaese view the attached image).
    I'm using the version 2009.3.1314.35.

    Please, I need your help in fxing the above problem,
    It is appreciated to send me the modified code.

    Regards,
    Bader
    Attached files

  • Yana Yana admin's avatar

    Posted on Jan 27, 2011 (permalink)

    Hello Bader,

    Please remove the following css:

    div.RadMenu a.rmLink .rmLeftImage
    {
       position: relative;
              
    }

    this fixed the issue at our side.

    All the best,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.

  • Bader Master avatar

    Posted on Feb 5, 2011 (permalink)

    Hello,

    Thank you very much for your reply, It is useful..
    I faced another problem in displaying the radmenu in chrome and safari browser. The radmenuitems are not displayed well (Plaese view the attached image). The radmenu is displayed well in other browsers.
    I think it is important to indicate that the web site is in RTL mode (all pages).

    Here is the code of the usercontrol which contains the radmenu control:
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="HeaderWebUserControl.ascx.cs" Inherits="Common_UserControls_HeaderWebUserControl" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
      
    <style type="text/css"
        div.RadMenu .rmItem .rmLink .rmLeftImage, 
        div.RadMenu .rmItem .rmLink, 
        div.RadMenu .rmLink .rmText 
        
            margin: 0; 
            padding: 0; 
          
        
    </style
      
      
    <asp:Panel ID="HeaderPanel" runat="server" Height="120px" Width="952px">
        <asp:Panel ID="EnteranceImagePanel"  BorderWidth="0" BorderColor="Black" Height="120px" Width="952px" style="position:absolute;" runat="server" >  
            <asp:Image ID="EntarnceImage" ImageUrl="~/Common/UserControls/HeaderWebUserControl/Imgs/G1.jpg" Height="100%" Width="100%" runat="server" />
        </asp:Panel>
      
        <asp:Panel ID="MainImagePanel" BorderWidth="0" BorderColor="Black" style="position:relative;  z-index:1000;" HorizontalAlign="Right" Height="100%" Width="952px" ScrollBars="None" runat="server" >   
          <table border="0" width="100%" cellpadding="0" cellspacing="0" >
            <tr>
              <td valign="top" style="width:289px;">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                  <tr>
                    <td>
                       <asp:Panel ID="LogoPanel" runat="server" style="margin-top:1px;">
                          <asp:ImageButton ID="LogoImageButton" runat="server" Width="289px" Height="98px" ImageUrl="~/Common/UserControls/HeaderWebUserControl/Imgs/Logo.jpg"
                              onclick="LogoImageButton_Click" />
                        </asp:Panel>
                    </td>
                  </tr>
                  <tr>
                    <td>
                        <asp:Panel ID="LogoLabelPanel" runat="server" HorizontalAlign="Center" style="margin-top:-3px;">
                            <asp:Label ID="LogoLabel" Font-Bold="true" Font-Names="Arial" ForeColor="White" runat="server" Text="<%$ Resources:Resource, HeaderMenuLogoLabelText %>" ></asp:Label>
                        </asp:Panel>
                    </td>
                  </tr>
                </table>
              </td>
              <td valign="middle" style="width:663px;">
                 <asp:Panel ID="RotatorPanel" runat="server" Direction="LeftToRight" Width="97%" style="margin-right:12px;">
                  <telerik:RadRotator ID="RadRotator1" runat="server" Width="653px" Height="125px"   RotatorType="AutomaticAdvance"
                        CssClass="horizontalRotator" ScrollDirection="Right" ScrollDuration="5000" FrameDuration="0" ItemHeight="90px" 
                        ItemWidth="110">
                        <ItemTemplate>
                            <asp:Panel ID="RotatorImgPanel" BackImageUrl="~/Common/Img/BackGrounds/ItemBackGround.gif" Width="106px" Height="110px" BorderColor="Black" HorizontalAlign="Center" style="margin-top:5px;"  BorderWidth="0" runat="server">
                               <div style="margin-top:5px;">
                                    <img class="item" height="85px" width="90px" src='<%# Page.ResolveUrl("~/Common/UserControls/HeaderWebUserControl/Imgs/") + Container.DataItem.ToString().Substring(0,Container.DataItem.ToString().LastIndexOf(",")) %>.jpg'
                                         alt="" /><br />
                                    <asp:Label ID="MachineLabel" runat="server" Font-Bold="true" Font-Size="10pt" Text='<%# Container.DataItem.ToString().Substring(Container.DataItem.ToString().LastIndexOf(","), Container.DataItem.ToString().Length - Container.DataItem.ToString().LastIndexOf(",")).Replace(",","") %>' ></asp:Label>
                               </div>
                            </asp:Panel>
                        </ItemTemplate>
                    </telerik:RadRotator>   
                  </asp:Panel>
              </td>
            </tr>
          </table>
              
        </asp:Panel>  
          
        <asp:Panel ID="HeaderMenuPanel" runat="server" BorderWidth="0" BorderColor="Black" HorizontalAlign="Right" style="margin-right:1px;">
            <telerik:RadMenu ID="RadMenu1" runat="server" Skin="" Flow="Horizontal"  EnableImagePreloading="true" Width="952px">
            </telerik:RadMenu>
        </asp:Panel>
    </asp:Panel>

    and:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
    using System.Drawing;
      
    public partial class Common_UserControls_HeaderWebUserControl : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            RadRotator1.DataSource = GetRotatorDataSource();
            RadRotator1.DataBind();
      
            if (!Page.IsPostBack)
            {
                RadMenu1.LoadContentFile("~/Common/xml/HeaderMenu.xml");
            }
        }
      
        private string[] GetRotatorDataSource()
        {
            string[] poets = { "b250," + Resources.Resource.HeaderWebUserControlRadRotatorb250ImgName.ToString(), 
                               "DfosBostarimIkanbis," + Resources.Resource.HeaderWebUserControlRadRotatorDfosBostarimIkanbisImgName.ToString(), 
                               "DfosMeshi," + Resources.Resource.HeaderWebUserControlRadRotatorDfosMeshiImgName.ToString(), 
                               "DfosSfarim," + Resources.Resource.HeaderWebUserControlRadRotatorDfosSfarimImgName.ToString(), 
                               "DfosSolemazia," + Resources.Resource.HeaderWebUserControlRadRotatorDfosSolemaziaImgName.ToString(), 
                               "DfosZevoni," + Resources.Resource.HeaderWebUserControlRadRotatorDfosZevoniImgName.ToString(), 
                               "HitochOtiot," + Resources.Resource.HeaderWebUserControlRadRotatorHitochOtiotImgName.ToString(), 
                               "Hotamot," + Resources.Resource.HeaderWebUserControlRadRotatorHotamotImgName.ToString(), 
                               "Hrita," + Resources.Resource.HeaderWebUserControlRadRotatorHritaImgName.ToString(), 
                               "KrichatReshet," + Resources.Resource.HeaderWebUserControlRadRotatorKrichatReshetImgName.ToString(), 
                               "Liminazia," + Resources.Resource.HeaderWebUserControlRadRotatorLiminaziaImgName.ToString(), 
                               "MadpstSfalim," + Resources.Resource.HeaderWebUserControlRadRotatorMadpstSfalimImgName.ToString()};
            return poets;
        }
      
        protected void LogoImageButton_Click(object sender, ImageClickEventArgs e)
        {
            Response.Redirect("~/Default.aspx");
        }
    }

    HeaderMenu.xml:
    <?xml version="1.0" encoding="utf-8" ?>
    <Menu>
      <Item ItemID="-1" SubCtgry="" IText="" Visible="false" ImageUrl="" HoveredImageUrl="" NavigateUrl=""></Item>
      <Item ItemID="0" SubCtgry="" IText="?? ????" ImageUrl="Imgs/RadMenu/DafRashi.jpg" HoveredImageUrl="Imgs/RadMenu/DafRashi_hov.jpg" NavigateUrl="~/HomePage.aspx" ></Item>
      <Item ItemID="1" SubCtgry="PrintingOnProducts" IText="????? ?? ??????" ImageUrl="Imgs/RadMenu/HadfsaAlMozarim.jpg" HoveredImageUrl="Imgs/RadMenu/HadfsaAlMozarim_hov.jpg" NavigateUrl="~/Pages/PrintingOnProducts/Default.aspx" ></Item>
      <Item ItemID="2" SubCtgry="" IText="????? ?? ??????" ImageUrl="Imgs/RadMenu/HadfsaAlHolzot.jpg" HoveredImageUrl="Imgs/RadMenu/HadfsaAlHolzot_hov.jpg" NavigateUrl="~/Pages/PrintingOnTShirts.aspx" ></Item>
      <Item ItemID="3" SubCtgry="Dfos" IText="????" ImageUrl="Imgs/RadMenu/Dfos.jpg" HoveredImageUrl="Imgs/RadMenu/Dfos_hov.jpg" NavigateUrl="~/Pages/Dfos/Default.aspx" ></Item>
      <Item ItemID="4" SubCtgry="" IText="??????" ImageUrl="Imgs/RadMenu/Hotamot.jpg" HoveredImageUrl="Imgs/RadMenu/Hotamot_hov.jpg" NavigateUrl="~/Pages/Stamps.aspx" ></Item>
      <Item ItemID="5" SubCtgry="Studio" IText="?????? ??????" ImageUrl="Imgs/RadMenu/StodioLzilom.jpg" HoveredImageUrl="Imgs/RadMenu/StodioLzilom_hov.jpg" NavigateUrl="~/Pages/Studio/Default.aspx" ></Item>
      <Item ItemID="6" SubCtgry="" IText="????? ?????" ImageUrl="Imgs/RadMenu/MozariPersom.jpg" HoveredImageUrl="Imgs/RadMenu/MozariPersom_hov.jpg" NavigateUrl="~/Pages/AdvertisingProducts.aspx" ></Item>
      <Item ItemID="7" SubCtgry="" IText="?????? ????????" ImageUrl="Imgs/RadMenu/ShaonimWTakhshitim.jpg" HoveredImageUrl="Imgs/RadMenu/ShaonimWTakhshitim_hov.jpg" NavigateUrl="~/Pages/WatchesAndJewelry.aspx" ></Item>
      <Item ItemID="8" SubCtgry="" IText="?????? ??????" ImageUrl="Imgs/RadMenu/GaliriatMatanot.jpg" HoveredImageUrl="Imgs/RadMenu/GaliriatMatanot_hov.jpg" NavigateUrl="~/Pages/GiftGallery.aspx" ></Item>
      <Item ItemID="9" SubCtgry="" IText="???? ?????" ImageUrl="Imgs/RadMenu/ZiodMesradi.jpg" HoveredImageUrl="Imgs/RadMenu/ZiodMesradi_hov.jpg" NavigateUrl="~/Pages/OfficeSupplies.aspx" ></Item>
      <Item ItemID="9" SubCtgry="" IText="??????? ??????"  ImageUrl="Imgs/RadMenu/LminaziaIkrikha.jpg" HoveredImageUrl="Imgs/RadMenu/LminaziaIkrikha_hov.jpg" NavigateUrl="~/Pages/LaminationAndBinding.aspx" ></Item>
    </Menu>

    Please, I need your help in order to make Chrome and Safari browsers display the RadMenu items exactly like IE and FireFox browsers.
    It is appreciated to send me the modified code.

    Reagards,
    Bader
    Attached files

  • Yana Yana admin's avatar

    Posted on Feb 11, 2011 (permalink)

    Hi Bader,

    Can you please send us a live url demonstrating the problem? Thanks

    All the best,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.

  • Bader Master avatar

    Posted on Feb 15, 2011 (permalink)

    Hello,

    Thank you for your reply,
    Please view the url http://www.tmonavot.com/HomePage.aspx.
    In addition, please download the sample application http://zajal.rayanet.co.il/website2.rar which uses the same code which is used in the above website.
    Attached two screen shots for the menu in IE and chrome browsers (in different versions).

    Please, I need your help in order to display the radmenu in a normal design in all browsers and in RTL mode.
    It is apprecited to send me the modified code.

    Regards,
    Bader

  • Yana Yana admin's avatar

    Posted on Feb 21, 2011 (permalink)

    Hi Bader,

    Thank you for sending the needed information.

    I was able to reproduce the issue and it can be fixed with the following css styles:

    <style type="text/css">       
        .RadMenu a { width: auto !important; }
    </style>

    I've attached the modified page.

    Best wishes,
    Yana
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
    Attached files

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET > Menu > Images Only Problem - RTL