RadDock TitleBarTemplate CSS Issue in FireFox

2 posts, 0 answers
  1. Aimee Rasmussen
    Aimee Rasmussen avatar
    13 posts
    Member since:
    Oct 2009

    Posted 02 Aug 2010 Link to this post

    I'm running into a strange issue with FireFox and the way it's rendering the Vista skin for a RadDock TitleBarTemplate.  See screenshots below. 

    I have a page with a RadDockLayout and 5 individual RadDockZones and RadDocks.  Inside of the zones I have a TitleBarTemplate defined with some labels/buttons/hyperlinks, etc., and then I'm using a user control to display to actual contents of the dock inside the ContentTemplate as displayed below.  

    4 of the docks have a user control which has a RadListView, and the other dock has a user control with a RadGrid inside of it.  The dock with the RadGrid is rendering perfectly in both IE and FireFox but the other 4 docks (with ListViews) are not.  The titlebar template is displaying this weird squiggly curtain-looking thing.  I checked it out both in IE developer tools and Firebug and I'm sure it has to do with the embedded image HorizontalSprite.gif.  That sprite shows three different versions of the same header.  IE is using the squared version but FF is using the middle image.  How do I make FF display the same image as IE??


    Markup Example:
    <telerik:RadDockZone ID="RadDockZoneInbox" runat="server" Width="99%"
    BorderStyle="None" EnableEmbeddedBaseStylesheet="true" EnableAjaxSkinRendering="true">
        <telerik:RadDock ID="RadDockInbox" runat="server" 
        width="99%" DefaultCommands="None"  EnableAjaxSkinRendering="true"
        DockMode="Docked" Skin="Vista" EnableDrag="False" Index="0" Tag="">
            <TitlebarTemplate>
                <asp:Label ID="lblInbox" font-bold="true" font-size="Large" runat="server" meta:resourcekey="lblInbox"></asp:Label>
                <asp:ImageButton runat="server" ID="btnUploadTransactions" style="position: absolute; margin: 1px; padding: 0; right: 10px;" OnClientClick="javascript: openWinPostLogin('/../TransactionPages/TransactionUpload.aspx', 'Modal', '.70', '.58');" />
                <asp:ImageButton runat="server" ID="btnDownloadTransactions" style="position: absolute; margin: 1px; padding: 0; right: 170px;" OnClientClick="DownloadTransactions();"/>
            </TitlebarTemplate>
            <ContentTemplate>
                <UC5:InboxWidget ID="InboxWidget1" runat="server"/>
            </ContentTemplate>
        </telerik:RadDock>
    </telerik:RadDockZone>





  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 03 Aug 2010 Link to this post

    Hi Aimee,

    I have tried to reproduce the problem but to no avail. I have used the following code:

    <!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">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadDockZone ID="RadDockZoneInbox" runat="server" Width="99%" BorderStyle="None"
            EnableEmbeddedBaseStylesheet="true" EnableAjaxSkinRendering="true">
            <telerik:RadDock ID="RadDockInbox" runat="server" Width="99%" DefaultCommands="None"
                EnableAjaxSkinRendering="true" DockMode="Docked" Skin="Vista" EnableDrag="False"
                Index="0" Tag="">
                <TitlebarTemplate>
                    <asp:Label ID="lblInbox" Font-Bold="true" Font-Size="Large" runat="server" meta:resourcekey="lblInbox"
                        Text="Titile"></asp:Label>
                    <asp:ImageButton runat="server" ID="btnUploadTransactions" Style="position: absolute;
                        margin: 1px; padding: 0; right: 10px;" />
                    <asp:ImageButton runat="server" ID="btnDownloadTransactions" Style="position: absolute;
                        margin: 1px; padding: 0; right: 170px;" />
                </TitlebarTemplate>
                <ContentTemplate>
                    <br />
                    <br />
                    <br />
                    Content
                    <br />
                    <br />
                </ContentTemplate>
            </telerik:RadDock>
        </telerik:RadDockZone>
        </form>
    </body>
    </html>

    Attached is result01.gif showing the result in Firefox.
    Could you send us a live url or a simple project where the problem exists, so we will be able to investigate it further?

    Best wishes,
    Bojo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top