Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Getting a full height toolbar

6 Answers 89 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Stuart Hemming
Top achievements
Rank 2
Stuart Hemming asked on 26 Apr 2010, 12:16 AM
I know that I can make a toolbar will the width of a page by simply setting "Width='100%'" but if I have set Orientation="Vertical" how do I get the toolbar to fill the full height of the page? The obvious "Height= '100%'" doesn't work.

-- 
Stuart

6 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 29 Apr 2010, 10:07 AM
verticaltabstrip.zip
Hi Stuart,

I've attached a simple page which demonstrates how you can achieve this, please download it and give it a try.

Best regards,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Stuart Hemming
Top achievements
Rank 2
answered on 03 May 2010, 08:36 PM
Hi Yana,

Thanks for that, but I'm trying to use a ToolBar, not a TabStrip.

-- 
Stuart
0
Yana
Telerik team
answered on 05 May 2010, 08:20 AM
verticaltabstrip.zip
Hello Stuart,

Please excuse me for my confusion.

I've modified the page to use RadToolBar, please download the attached file and give it a try.

Best wishes,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Stuart Hemming
Top achievements
Rank 2
answered on 15 Aug 2010, 03:40 PM
Hey Yana,

I know it's been a while since you posted your response to my question, but I rather got overtaken by events. Anyhow, I've had a play with your example and have made a couple of changes that include code to ensure that the toolbar resizes if the browser resizes...
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="verticalTabStrip.aspx.cs" Inherits="verticalTabStrip" %>
<%@ 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">
.RadToolBar, .rtbOuter, .rtbMiddle, .rtbInner, .rtbUL
{
height: 100%;
}
</style>
    </head>
    <body>
        <form id="form1"
              runat="server">
            <asp:ScriptManager ID="ss"
                               runat="server"/>
                <telerik:RadToolBar ID="RadToolBar1"
                                    runat="server"
                                    Orientation="Vertical"
                                    OnClientLoad="clientLoad"
                                    Skin="WebBlue"
                                    Height="100%">
                    <Items>
                        <telerik:RadToolBarButton Text="button 1"
                                                  ImagePosition="AboveText"
                                                  ImageUrl="Images/blog-blue.png"/>
                        <telerik:RadToolBarButton Text="button 2"
                                                  ImagePosition="AboveText"
                                                  ImageUrl="Images/blog-blue.png"/>
                        <telerik:RadToolBarButton Text="button 3"
                                                  ImagePosition="AboveText"
                                                  ImageUrl="Images/blog-blue.png"/>
                        <telerik:RadToolBarButton Text="button 4"
                                                  ImagePosition="AboveText"
                                                  ImageUrl="Images/blue-document.png"/>
                        <telerik:RadToolBarButton Text="button 5"
                                                  ImagePosition="AboveText"
                                                  ImageUrl="Images/blue-folder.png"/>
                    </Items>
                </telerik:RadToolBar>
        </form>
        <script type="text/javascript">
 
            function clientLoad(sender, args)
            {
                ResizeToolbar();
                $telerik.$(window).resize(function()
                                          {
                                              ResizeToolbar();
                                          });        
            }
 
            function ResizeToolbar()
            {
                var toolbar = $find("<%= RadToolBar1.ClientID %>");
                var percents = 100 / toolbar.get_items().get_count();
                $telerik.$(".rtbItem").css("height", percents + "%");
            }
        </script>
    </body>
</html>

I'm happy to say that it solves by problem in IE8 (which most of my target audience are using) in both modes.

I did give it a quick test in both Chrome and Safari and noticed that in these cases it didn't work in so much as the toolbar never extended past its normal height and nothing I could do seemed to change that.

I discovered that the problem is not with the code, per se, but with the DOCTYPE used on the page. I tried all 3 variants of the  XHTML 1.0 DOCTYPE and the 2 XHTML1.1 DOCTYPEs, too all to no avail. If I removed the DOCTYPE definition it all worked OK.

So the question is, I suppose, how do I get this working in other browsers with a DOCTYPE?

-- 
Stuart
0
Accepted
Yana
Telerik team
answered on 19 Aug 2010, 11:55 AM
verticaltabstrip.zip
Hi Stuart,

I'm sorry for the delayed reply.

I've attached the modified page with this issue fixed. Please note that you should set Width property of the toolbar. Download it and give it a try.

Best wishes,
Yana
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Stuart Hemming
Top achievements
Rank 2
answered on 26 Aug 2010, 04:26 PM
Yana,

Thanks for that.

I noticed that your latest version of the code sneakily included the CSS ...
div.RadToolBar { display: block; }

 Which I'd not seen before.

The upshot is that your code worked just fine, however, I did make the CSS read as follows ...
.RadToolBar_Vertical, .rtbOuter, .rtbMiddle, .rtbInner, .rtbUL
{
  height: 100%;
}
 
div.RadToolBar_Vertical
{
  display: block;
}
To prevent problems with any horizonal toolbars on the same page.

-- 
Stuart
Tags
ToolBar
Asked by
Stuart Hemming
Top achievements
Rank 2
Answers by
Yana
Telerik team
Stuart Hemming
Top achievements
Rank 2
Share this question
or