Telerik Forums / UI for ASP.NET AJAX
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 226 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Gunnar
Top achievements
Rank 1
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

Sort by
0
Paul
Telerik team
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
0
Gunnar
Top achievements
Rank 1
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
0
Accepted
Paul
Telerik team
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
0
Gunnar
Top achievements
Rank 1
answered on 23 Jul 2008, 12:38 PM
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
Tags
ToolBar
Asked by
Gunnar
Top achievements
Rank 1
Answers by
Paul
Telerik team
Gunnar
Top achievements
Rank 1
Share this question
or