How do I center align images and texts when Orientation Vertical?

5 posts, 1 answers
  1. Gunnar
    Gunnar avatar
    17 posts
    Member since:
    Jun 2008

    Posted 23 Jul 2008 Link to this post

    Hi,

    I'm trying to create a vertical toolbar where each toolbar item has a text with an image above:

    <style type="text/css">  
        .RadToolbar  
        {  
            width: 100%;  
            text-align: center;  
        }  
    </style> 
     
    <table width="100%" align="center" border="0">  
    <tr> 
    <td align="center">  
    <telerik:RadToolBar ID="RadToolBar1" runat="server" Orientation="Vertical" Skin="" CssClass="RadToolbar" BorderColor="" BorderWidth="0" Width="100%">  
        <Items> 
            <telerik:RadToolBarButton ImageUrl="~/Images/Apps/compass.png" ImagePosition="AboveText" Text="Item 1" Width="100%" BorderWidth="0" CssClass="RadToolbar" /> 
            <telerik:RadToolBarButton ImageUrl="~/Images/Apps/tables.png" ImagePosition="AboveText" Text="Item 2 ..." /> 
            <telerik:RadToolBarButton ImageUrl="~/Images/Apps/toolbox.png" ImagePosition="AboveText" Text="Item 3 with more text"/>  
            <telerik:RadToolBarButton ImageUrl="~/Images/Apps/cube_yellow.png" ImagePosition="AboveText" Text="Item 4"/>  
            <telerik:RadToolBarButton ImageUrl="~/Images/Apps/money2.png" ImagePosition="AboveText" Text="Item 5 some text......."/>  
        </Items> 
    </telerik:RadToolBar> 
    </td> 
    </tr> 
    </table> 

    What I can't seem to do is center align the toolbar items.
    How do I do that?

    Regards
  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 23 Jul 2008 Link to this post

    Hi Gunnar,

    Please find below your modified code snippet that works as expected.

    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title>Untitled Page</title> 
        <style type="text/css">  
        html, body, form  
        {  
            width: 100%;  
            margin: 0;  
        }  
          
        .RadToolBar_Vertical  
        {  
            float: none !important;  
        }  
          
        div.RadToolBar_Vertical .rtbItem  
        {  
            float: none !important;  
            display: block !important;  
            text-align: center;  
            width: 100% !important;  
        }  
     
        div.RadToolBar .rtbWrap  
        {  
            float: none !important;  
            display: inline-block !important;  
        }  
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
            <asp:ScriptManager ID="ScriptManager1" runat="server">  
            </asp:ScriptManager> 
            <table width="100%" align="center" border="0">  
                <tr> 
                    <td align="center">  
                        <telerik:RadToolBar ID="RadToolBar1" runat="server" Orientation="Vertical" Width="100%" BorderColor="" BorderWidth="0" Skin="">  
                            <Items> 
                                <telerik:RadToolBarButton ImageUrl="~/Images/Apps/compass.png" ImagePosition="AboveText" Text="Item 1" /> 
                                <telerik:RadToolBarButton ImageUrl="~/Images/Apps/tables.png" ImagePosition="AboveText" Text="Item 2 ..." /> 
                                <telerik:RadToolBarButton ImageUrl="~/Images/Apps/toolbox.png" ImagePosition="AboveText" Text="Item 3 with more text" /> 
                                <telerik:RadToolBarButton ImageUrl="~/Images/Apps/cube_yellow.png" ImagePosition="AboveText" Text="Item 4" /> 
                                <telerik:RadToolBarButton ImageUrl="~/Images/Apps/money2.png" ImagePosition="AboveText" Text="Item 5 some text......." /> 
                            </Items> 
                        </telerik:RadToolBar> 
                    </td> 
                </tr> 
            </table> 
        </form> 
    </body> 
    </html> 


    Greetings,
    Paul
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gunnar
    Gunnar avatar
    17 posts
    Member since:
    Jun 2008

    Posted 23 Jul 2008 Link to this post

    Hi and thank you for the lightning fast feedback!

    I've successfully tested your submitted example.
    But when I implement it in my page the Toolbar becomes invisible...?

    Here's the code:
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="RadSplitter100.aspx.vb" Inherits="RadSplitter100" %> 
    <%@ 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 id="Head1" runat="server">  
        <title>FullWindow</title> 
        <style type="text/css">  
            html, body, form  
            {  
                height: 100%;  
                margin: 0px;  
                padding: 0px;  
                overflow: hidden;  
            }  
            .RadToolBar_Vertical  
            {  
                float: none !important;  
            }  
            div.RadToolBar_Vertical .rtbItem  
            {  
                float: none !important;  
                display: block !important;  
                text-align: center;  
                width: 100% !important;  
            }  
            div.RadToolBar .rtbWrap  
            {  
                float: none !important;  
                display: inline-block !important;  
            }  
              
            </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager" runat="server" /> 
        <div id="ParentDivElement" style="height: 100%;">  
            <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%" Orientation="Horizontal" Skin="Outlook">  
                <telerik:RadPane ID="TopPane" runat="server" Height="100" Scrolling="none">  
                    <!-- Place the content of the pane here --> 
                    <img title="Caesar startsida" src="images/logos/logo.png" style="border-width: 0px; padding-bottom: 2px; padding-top: 7px; padding-left:7px" alt="Startpage" /> 
                </telerik:RadPane> 
                <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" EnableResize="false" /> 
                <telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500">  
                    <telerik:RadSplitter ID="NestedSplitter" runat="server" Skin="">  
                        <telerik:RadPane ID="LeftPane" runat="server" Width="150" Scrolling="Both">  
                        <table width="100%"><tr><td align="center">  
                            <table align="center" border="0">  
                                <tr> 
                                    <td align="center">  
                                        <telerik:RadToolBar ID="RadToolBar1" runat="server" Width="100%" Orientation="Vertical" Skin="" BorderWidth="0">  
                                            <Items> 
                                                                       <telerik:RadToolBarButton ImageUrl="~/Images/Apps/compass.png" ImagePosition="AboveText" Text="Item 1" />    
                                <telerik:RadToolBarButton ImageUrl="~/Images/Apps/tables.png" ImagePosition="AboveText" Text="Item 2 ..." />    
                                <telerik:RadToolBarButton ImageUrl="~/Images/Apps/toolbox.png" ImagePosition="AboveText" Text="Item 3 with more text" />    
                                <telerik:RadToolBarButton ImageUrl="~/Images/Apps/cube_yellow.png" ImagePosition="AboveText" Text="Item 4" />    
                                <telerik:RadToolBarButton ImageUrl="~/Images/Apps/money2.png" ImagePosition="AboveText" Text="Item 5 some text......." />   
                                            </Items> 
                                        </telerik:RadToolBar> 
                                    </td> 
                                </tr> 
                            </table> 
                        </td> 
                        </tr> 
                        </table> 
                        </telerik:RadPane> 
                        <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" EnableResize="false" /> 
                        <telerik:RadPane ID="ContentPane" runat="server">  
                            <telerik:RadDockLayout runat="server" ID="RadDockLayout1" Skin="Default">  
                                <table class="wrapper" border="0" cellpadding="0" cellspacing="0">  
                                    <tr valign="top" style="height: 33%;">  
                                        <td colspan="2">  
                                            <telerik:RadDockZone runat="server" ID="RadDockZone2" Height="99%">  
                                                <telerik:RadDock runat="server" ID="RadDock2" Title="title" ToolTip="tooltip" Height="99%">  
                                                    <TitlebarTemplate> 
                                                        IFRAME!!  
                                                    </TitlebarTemplate> 
                                                    <ContentTemplate> 
                                                        <iframe name="main_content" align="left" src="http://www.sportplatsen.se" frameborder="no" width="100%" height="100%" scrolling="yes"></iframe> 
                                                    </ContentTemplate> 
                                                </telerik:RadDock> 
                                            </telerik:RadDockZone> 
                                        </td> 
                                    </tr> 
                                    <tr valign="top" style="height: 33%;">  
                                        <td> 
                                            <telerik:RadDockZone runat="server" ID="RadDockZone3">  
                                                <telerik:RadDock runat="server" ID="RadDock3" Title="title" ToolTip="tooltip">  
                                                    <TitlebarTemplate> 
                                                        <asp:DropDownList ID="Dropdownlist2" runat="server">  
                                                            <asp:ListItem Value="rad 1"></asp:ListItem> 
                                                        </asp:DropDownList> 
                                                    </TitlebarTemplate> 
                                                    <ContentTemplate> 
                                                        content  
                                                    </ContentTemplate> 
                                                </telerik:RadDock> 
                                            </telerik:RadDockZone> 
                                        </td> 
                                        <td> 
                                            <telerik:RadDockZone runat="server" ID="RadDockZone4">  
                                                <telerik:RadDock runat="server" ID="RadDock4" Title="title" ToolTip="tooltip">  
                                                    <TitlebarTemplate> 
                                                        <asp:DropDownList ID="Dropdownlist3" runat="server">  
                                                            <asp:ListItem Value="rad 1"></asp:ListItem> 
                                                        </asp:DropDownList> 
                                                    </TitlebarTemplate> 
                                                    <ContentTemplate> 
                                                        content  
                                                    </ContentTemplate> 
                                                </telerik:RadDock> 
                                            </telerik:RadDockZone> 
                                        </td> 
                                    </tr> 
                                    <tr valign="top" style="height: 33%;">  
                                        <td colspan="2">  
                                            <telerik:RadDockZone runat="server" ID="RadDockZone1">  
                                                <telerik:RadDock runat="server" ID="RadDock1" Title="title" ToolTip="tooltip">  
                                                    <TitlebarTemplate> 
                                                        <asp:DropDownList ID="drp1" runat="server">  
                                                            <asp:ListItem Value="rad 1"></asp:ListItem> 
                                                        </asp:DropDownList> 
                                                    </TitlebarTemplate> 
                                                    <ContentTemplate> 
                                                        content  
                                                    </ContentTemplate> 
                                                </telerik:RadDock> 
                                            </telerik:RadDockZone> 
                                        </td> 
                                    </tr> 
                                </table> 
                            </telerik:RadDockLayout> 
     
                        </telerik:RadPane> 
                    </telerik:RadSplitter> 
                </telerik:RadPane> 
                  
                <telerik:RadSplitBar ID="RadsplitbarBottom" runat="server" EnableResize="false" /> 
                <telerik:RadPane ID="BottomPane" runat="server" Height="100" Scrolling="none">  
                    <table style="margin-top: 7px; text-align:center">  
                        <tr> 
                            <td style="width:150px" align="center">  
                                <div align="center" style="text-align:center;">  
                                <telerik:RadMenu ID="RadMenu1" runat="server" EnableScreenBoundaryDetection="true" Flow="Vertical">  
                                <DefaultGroupSettings Flow="Vertical" ExpandDirection="Down" /> 
                                    <Items> 
                                      
                                        <telerik:RadMenuItem id="RadMenuItem1" runat="server" ImageUrl="~/Images/Apps/preferences.png" ToolTip="Settings">  
                                            <Items> 
                                                <telerik:RadMenuItem ImageUrl="~/Images/Apps/businessman_preferences.png" Text="Information"></telerik:RadMenuItem> 
                                                <telerik:RadMenuItem ImageUrl="~/Images/Apps/earth2.png" Text="Regional">  
                                                </telerik:RadMenuItem> 
                                                <telerik:RadMenuItem ImageUrl="~/Images/Apps/calendar.png" Text="Calendar">  
                                                </telerik:RadMenuItem> 
                                            </Items> 
                                          
                                        </telerik:RadMenuItem> 
                                    </Items> 
                                </telerik:RadMenu> 
                                </div> 
                            </td> 
                        </tr> 
                    </table> 
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </div> 
        </form> 
    </body> 
    </html> 
     

    Could you please assist me in what is wrong?

    Regards
  5. Answer
    Paul
    Admin
    Paul avatar
    4281 posts

    Posted 23 Jul 2008 Link to this post

    Hi Gunnar,

    We tried to reproduce the reported issue using the latest version of the control, but to no avail; please refer to the attached screesnhot for details.

    I think it will be best if you can open a support ticket and send us a simple running project (incl. your custom skin, CSS, images, DB backup if needed and so on) demonstrating the problem (and step-by-step instructions on doing so). In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

    Greetings,
    Paul
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Gunnar
    Gunnar avatar
    17 posts
    Member since:
    Jun 2008

    Posted 23 Jul 2008 Link to this post

    Thanks for the answer.

    I ran an old version (2008.1.515) and after installing the latest version it works like a charm - case closed :)

    Regards
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017