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

RadDock TitleBarTemplate CSS Issue in FireFox

1 Answer 145 Views

Dock

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

Aimee Rasmussen asked on 02 Aug 2010, 04:57 PM

ff-dashboard.png

ie-dashboard.png

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>

1 Answer, 1 is accepted

answered on 03 Aug 2010, 08:34 AM

result01.gif

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

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

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

Content

<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