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

RadToolBar not rendered correctly after Telerik upgrade

3 Answers 90 Views

ToolBar

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

Matt asked on 19 Jan 2011, 01:10 PM

RadToolBar2008.jpg

RadToolBar2010.jpg

Hello,

I created a RadToolBar with version Q2 2008 and everything look great. I'm now upgrading our site to use version Q3 2010, and my RadToolBar now looks ugly. There are three main faults. (See attached screen shots)
1. A white bar has appeared when a button or drop down menu is highlighted.
2. Buttons that belong to a drop down do not show there images fully.
3. Buttons that belong to a drop down are highlighted in bars.

I've created a test site with a RadToolBar. I can change my reference of Telerik.Web.UI.dll from Q2 2008 to Q3 2010 to experience the differences quickly, which looks like:

<%@ 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 id="Head1" runat="server">

<title>Toolbar Test</title>

</head>

<body>

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

<telerik:RadScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadToolBar runat="server" id="MyBar" Orientation="Vertical" >

<Items>

<telerik:RadToolBarDropDown runat="server" ImageUrl="~/Images/NewReceipt.jpg"

Text="DropDown 0">

<Buttons>

<telerik:RadToolBarButton runat="server"

ImageUrl="~/Images/ReceiptInternal.jpg" Text="Child Button 1" Height="58px">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server"

ImageUrl="~/Images/ReceiptExternal.jpg" Text="Child Button 2" Height="58px">

</telerik:RadToolBarButton>

</Buttons>

</telerik:RadToolBarDropDown>

</Items>

</telerik:RadToolBar>

</form>

</body>

</html>

Can anyone help me to fix these faults?

Thanks,

Matt

3 Answers, 1 is accepted

Accepted

answered on 21 Jan 2011, 03:22 PM

Hi Matt,

Please add the following css styles to your page:

<style type="text/css">

div.RadToolBarDropDown .rtbWrap

{

line-height: 52px;

padding-left: 57px;

}

div.RadToolBarDropDown .rtbItemHovered,

div.RadToolBarDropDown .rtbItemFocused,

div.RadToolBarDropDown .rtbItemHovered .rtbWrap,

div.RadToolBarDropDown .rtbItemFocused .rtbWrap

{

background-image: none;

background-color: #8E8E8E;

}

</style>

in order to fix these issues.

Regards,
Yana
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.