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

Getting a full height toolbar

6 Answers 41 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
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
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
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