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

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

2 Answers 49 Views

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

Bhanu asked on 10 Aug 2011, 01:59 PM

Completed.png

Failed.png

InProgress.png

NotStarted.png

Unknown.png

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">

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

<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 Answers, 1 is accepted

answered on 15 Aug 2011, 04:53 PM

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.