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

Radio button in RadDock caption

4 Answers 128 Views

Dock

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

john asked on 20 Jun 2011, 07:19 AM

TitleBarTemplate.png

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:

<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

answered on 22 Jun 2011, 02:24 PM

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:

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

Accepted

answered on 23 Jun 2011, 12:12 PM

Hi John,

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