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

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

4 Answers 315 Views

ToolBar

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

Gunnar asked on 23 Jul 2008, 09:41 AM

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

4 Answers, 1 is accepted

answered on 23 Jul 2008, 10:42 AM

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

answered on 23 Jul 2008, 11:28 AM

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

Accepted

answered on 23 Jul 2008, 12:26 PM

ss-0033.jpg

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