Hi,
I'm trying to customize a RadDock caption adding a radio button using TitlebarTemplate. The problem is that the result is different in Internet Explorer and Firefox (in IExplorer I can't center the radio button vertically). This is the code I'm using:
I attach a screen capture with the result in the two browsers.
How can I center vertically the radio button in the caption, in order the final result to be the same in IExplorer and Firefox?
Regards,
John.
I'm trying to customize a RadDock caption adding a radio button using TitlebarTemplate. The problem is that the result is different in Internet Explorer and Firefox (in IExplorer I can't center the radio button vertically). This is the code I'm using:
<telerik:RadDockZone ID="RadDockZoneTest" Runat="server" Width="300px" BorderStyle="None" Skin="Forest"> <telerik:RadDock ID="RadDock4" Runat="server" Width="300px" DefaultCommands="None" EnableDrag="False" EnableRoundedCorners="True" Skin="Forest"> <TitlebarTemplate> <table style="width:100%;"> <tr> <td style="vertical-align: middle; width: 20px;"> <telerik:RadButton ID="rbtnReport" runat="server" AutoPostBack="False" ButtonType="ToggleButton" Text="" ToggleType="Radio" Skin="Forest"> </telerik:RadButton> </td> <td style="vertical-align: middle"> <asp:Label ID="Label7" runat="server" Text="CAPTION" Font-Names="Segoe UI" Font-Size="10pt"></asp:Label> </td> </tr> </table> </TitlebarTemplate> <ContentTemplate> <asp:Label ID="Label8" runat="server" Text="Result in IExplorer"></asp:Label> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone>I attach a screen capture with the result in the two browsers.
How can I center vertically the radio button in the caption, in order the final result to be the same in IExplorer and Firefox?
Regards,
John.
4 Answers, 1 is accepted
0
Hi john,
Set the height of the table inside TitlebarTemplate to 26px in order to make it equal in Firefox and IE. This way the radio button will be centered in both browsers.
Here is your code with the applied change:
All the best,
Slav
the Telerik team
Set the height of the table inside TitlebarTemplate to 26px in order to make it equal in Firefox and IE. This way the radio button will be centered in both browsers.
Here is your code with the applied change:
<telerik:RadDockZone ID="RadDockZoneTest" Runat="server" Width="300px" BorderStyle="None" Skin="Forest"> <telerik:RadDock ID="RadDock4" Runat="server" Width="300px" DefaultCommands="None" EnableDrag="False" EnableRoundedCorners="True" Skin="Forest"> <TitlebarTemplate> <table style="width:100%;height:26px;"> <tr> <td style="vertical-align: middle; width: 20px;"> <telerik:RadButton ID="rbtnReport" runat="server" AutoPostBack="False" ButtonType="ToggleButton" Text="" ToggleType="Radio" Skin="Forest"> </telerik:RadButton> </td> <td style="vertical-align: middle"> <asp:Label ID="Label7" runat="server" Text="CAPTION" Font-Names="Segoe UI" Font-Size="10pt"></asp:Label> </td> </tr> </table> </TitlebarTemplate> <ContentTemplate> <asp:Label ID="Label8" runat="server" Text="Result in IExplorer"></asp:Label> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone>All the best,
Slav
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.
0
john
Top achievements
Rank 1
Rank 1
answered on 23 Jun 2011, 07:11 AM
Hi,
I've tried setting the table height to 26px but the result is the same. Any other solution?
Regards,
John.
I've tried setting the table height to 26px but the result is the same. Any other solution?
Regards,
John.
0
Accepted
Hi John,
Please add the following CSS class to your radio button in order to be centered vertically both in Firefox and Internet Explorer.
Also it will be better if you set the text in the Titlebar through the Text property of RadButton, instead of using separate Label control . That way the radio button and the text will be positioned as a whole.
Finally, your code should be configured as specified below:
If the issue persists, please clarify under which version of Internet Explorer you are experiencing it.
Regards,
Slav
the Telerik team
Please add the following CSS class to your radio button in order to be centered vertically both in Firefox and Internet Explorer.
.btnDock{ margin-top: 2px\9; /* IE All specific hack */ *margin-top: 0; /* IE 6 and 7 specific hack */}Also it will be better if you set the text in the Titlebar through the Text property of RadButton, instead of using separate Label control . That way the radio button and the text will be positioned as a whole.
Finally, your code should be configured as specified below:
<%@ 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> <style type="text/css"> .btnDock { margin-top: 2px\9; /* IE All specific hack */ *margin-top: 0; /* IE 6 and 7 specific hack */ } </style></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadDockZone ID="RadDockZoneTest" runat="server" Width="300px" BorderStyle="None" Skin="Forest"> <telerik:RadDock ID="RadDock4" runat="server" Width="300px" DefaultCommands="None" EnableDrag="False" EnableRoundedCorners="True" Skin="Forest"> <TitlebarTemplate> <table style="width: 100%;"> <tr> <td style="vertical-align: middle; width: 20px;"> <telerik:RadButton ID="rbtnReport" runat="server" AutoPostBack="False" ButtonType="ToggleButton" ToggleType="Radio" Skin="Forest" CssClass="btnDock" Text="CAPTION"> </telerik:RadButton> </td> </tr> </table> </TitlebarTemplate> <ContentTemplate> <asp:Label ID="Label8" runat="server" Text="Result in IExplorer"></asp:Label> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </div> </form></body></html>If the issue persists, please clarify under which version of Internet Explorer you are experiencing it.
Regards,
Slav
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.
0
john
Top achievements
Rank 1
Rank 1
answered on 23 Jun 2011, 12:41 PM
Thanks for your help, now it works fine (the version of Internet Explorer is 8).