Getting a full height toolbar

7 posts, 1 answers
  1. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 25 Apr 2010 Link to this post

    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
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 29 Apr 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 03 May 2010 Link to this post

    Hi Yana,

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

    -- 
    Stuart
  5. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 05 May 2010 Link to this post

    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.
  6. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 15 Aug 2010 Link to this post

    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
  7. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 19 Aug 2010 Link to this post

    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
  8. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 26 Aug 2010 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017