Shrink ToolBar Height to Minimum Possible

5 posts, 1 answers
  1. Greg
    Greg avatar
    12 posts
    Member since:
    May 2009

    Posted 24 Nov 2009 Link to this post

    I'm trying to shrink the ToolBar height to match the height of my button images (*.GIF files). The RadToolBar Height property is buggy and doesn't work properly. My buttons are only 9 pixels high so I should be able to shrink the ToolBar height by about 30%. I have tried all the CSS/Style examples on the forums and none of them work correctly.

     I want to shrink the height to the minimum possible given my 9 pixel high button images. I do not want to apply this height shrinking to all tool bars on the page. Only some of them. I want to leave the rest of the tool bars at the stock height. I'm running Visual Studio 2008 SP1 with Telerik 2009 Q3, IE8 and Firefox. I'm currently using the Office 2007 Skin but it would be nice if the shrinking solution worked with all skins without modification.

    Here is my test page. I have attached the button GIF files.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TelerikWebForm.aspx.cs" Inherits="TelerikWebForm" %> 
     
    <!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 runat="server">  
        <title></title>  
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" /> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
            <Scripts> 
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
            </Scripts> 
        </telerik:RadScriptManager> 
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
        </telerik:RadAjaxManager> 
        <div> 
            <br/><br/><br/> 
            <telerik:RadToolBar ID="rtbRecNavCtl" Runat="server">  
                <Items> 
                    <telerik:RadToolBarButton runat="server"   
                        ImageUrl="RecNavFirst.gif" CausesValidation="False" Value="F">  
                    </telerik:RadToolBarButton> 
                    <telerik:RadToolBarButton runat="server"   
                        ImageUrl="RecNavPrev.gif" CausesValidation="False" Value="P">  
                    </telerik:RadToolBarButton> 
                    <telerik:RadToolBarButton runat="server"   
                        ImageUrl="RecNavNext.gif" CausesValidation="False" Value="N">  
                    </telerik:RadToolBarButton> 
                    <telerik:RadToolBarButton runat="server"   
                        ImageUrl="RecNavLast.gif" CausesValidation="False" Value="L">  
                    </telerik:RadToolBarButton> 
                </Items> 
            </telerik:RadToolBar> 
            <br/><br/><br/> 
        </div> 
        </form> 
    </body> 
    </html> 

    Thank You,
    Greg
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 27 Nov 2009 Link to this post

    Hello Greg,

    Please add the following css styles to your page in order to shrink the toolbar:

    <style type="text/css">
        div.RadToolBar .rtbOuter {
            display: block !important;
        }
         
        .RadToolBar .rtbInner {
            padding: 0 !important;
        }
         
        .RadToolBar .rtbItem {
            height: 15px !important;
        }
         
        .RadToolBar .rtbIcon {
            padding: 0 !important;
        }
    </style>


    Kind regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Greg
    Greg avatar
    12 posts
    Member since:
    May 2009

    Posted 30 Nov 2009 Link to this post

    Yana,

    Thanks for the reply. Unfortunately, this solution does not work for me. My web page has 4 tool bars on it. I need to shrink only 2 of the 4 tool bars. This solution shrinks all of them including the tool bars that I do not want to modify in any way. Note: This style trick does the shrinking part correctly for the ToolBars I want to shrink. I just need a way to apply it selectively.

    Thanks,
    Greg
  5. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 01 Dec 2009 Link to this post

    Hello Greg,

    This can be achieved very easily, just set CssClass property to the toolbar that needs to be shrinked:

    <telerik:RadToolBar ID="rtbRecNavCtl" Runat="server" CssClass="smallToolBar">

    and modify your styles to apply only to it using the class:

    <style type="text/css">
        .smallToolBar .rtbOuter {
            display: block !important;
        }
         
        .smallToolBar .rtbInner {
            padding: 0 !important;
        }
         
        .smallToolBar .rtbItem {
            height: 15px !important;
        }
         
        .smallToolBar .rtbIcon {
            padding: 0 !important;
        }
    </style>


    Best regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Greg
    Greg avatar
    12 posts
    Member since:
    May 2009

    Posted 02 Dec 2009 Link to this post

    Yana,

    That worked! Thanks for the help! It looks like I had a typo when I first tried to modify the style for use on 2 out of the 4 tool bars. Doho! I have it working now.

    Thanks,
    Greg
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017