Radio button in RadDock caption

5 posts, 1 answers
  1. john
    john avatar
    32 posts
    Member since:
    Nov 2010

    Posted 20 Jun 2011 Link to this post

    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.




  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 22 Jun 2011 Link to this post

    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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. john
    john avatar
    32 posts
    Member since:
    Nov 2010

    Posted 23 Jun 2011 Link to this post

    Hi,

    I've tried setting the table height to 26px but the result is the same. Any other solution?

    Regards,
    John.

  5. Answer
    Slav
    Admin
    Slav avatar
    1355 posts

    Posted 23 Jun 2011 Link to this post

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

  6. john
    john avatar
    32 posts
    Member since:
    Nov 2010

    Posted 23 Jun 2011 Link to this post

    Thanks for your help, now it works fine (the version of Internet Explorer is 8).
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017