Images are displayed after the text when the flow is set to Horizontal.

3 posts, 0 answers
  1. Bhanu
    Bhanu avatar
    41 posts
    Member since:
    Jul 2010

    Posted 10 Aug 2011 Link to this post

    Hi,

    I have a radmenu which has top level menu items. Each toplevel menu item has submenu items in it and those submenu items have to be displayed horizontally and each item has an image associated with it.
    But when we set the item flow as horizontal, Image is displayed after the text.
    Image has to be displayed before the text just like as in Vertical flow.

    Can you help how to achieve this ?


    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
      
    <!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>
    </head>
    <body>
        <form id="form1" runat="server">
         <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
      </telerik:RadScriptManager>
      <telerik:RadMenu ID="WorkFlowMenu" runat="server" >       
      
       </telerik:RadMenu>
        <div>
          
        </div>
        </form>
    </body>
    </html>
    protected void Page_Load(object sender, EventArgs e)
        {
            
          RadMenuItem top1 = new RadMenuItem();
          top1.Text = "Top 1";
          top1.ImageUrl = "~/Images/NotStarted.png";
      
          RadMenuItem child1 = new RadMenuItem();
          child1.Text = "Child 1";
          child1.ImageUrl = "~/Images/Completed.png";
            
          RadMenuItem child2 = new RadMenuItem();
          child2.Text = "Child 2";
          child2.ImageUrl = "~/Images/Failed.png";
            
          top1.Items.Add(child1);
          top1.Items.Add(child2);
          top1.GroupSettings.Flow = ItemFlow.Horizontal;
      
          WorkFlowMenu.Items.Add(top1);
             
      
        }

  2. Bhanu
    Bhanu avatar
    41 posts
    Member since:
    Jul 2010

    Posted 11 Aug 2011 Link to this post

    Any updates please ??
    Your help is very much appreciated.
  3. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 15 Aug 2011 Link to this post

    Hello Bhanu,

    I tested the code that you provided with Q2 2011 version of the Telerik controls and I get the appearance that you describe only in IE7. In any other browser I do not encounter any issues with the images i.e they appear as expected - on the left side of the text of RadMenuItems. However, to workaround the issue in IE7 you can use the following code:
    <style type="text/css">
            * + html .RadMenu .rmGroup .rmLeftImage
            {
                position: relative !important;
            }
        </style>
     
    Best wishes,
    Kate
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top