RadToolBar not rendered correctly after Telerik upgrade

4 posts, 1 answers
  1. Matt
    Matt avatar
    33 posts
    Member since:
    Nov 2010

    Posted 19 Jan 2011 Link to this post

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

  2. Matt
    Matt avatar
    33 posts
    Member since:
    Nov 2010

    Posted 20 Jan 2011 Link to this post

    I've sorted out fault #1, I was viewing my page in IE with Document Mode set to quirks.

    But I can't find a solution to display 48x48 images in RadToolBarButton's. HELP!!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 21 Jan 2011 Link to this post

    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.
  5. Matt
    Matt avatar
    33 posts
    Member since:
    Nov 2010

    Posted 21 Jan 2011 Link to this post

    Thanks Yana, that perfect!
Back to Top