How remove space between endcap graphics and toolbar graphics

2 posts, 0 answers
  1. Kevin
    Kevin avatar
    61 posts
    Member since:
    Oct 2008

    Posted 22 May 2009 Link to this post

    We have a graphic toolbar and are adding endcap graphics to each end to make things look better.

    However I can't seem to remove the extra space that exists between the endcap graphic and the first/last toolbar graphic.

    I had already added the following css to make sure all the toolbar graphics themselves were up against each other:

        <style type="text/css">     
           .RadToolBar .rtbIcon,     
           .RadToolBar .rtbIn,     
           .RadToolBar .rtbMid  {     
                padding: 0 !important;     
            }     
                 
            .RadToolBar .rtbItem {     
                margin: 0 !important;     
            }     
        </style>    
     

    But that doesn't seem to affect edges.  Is there a margin on the left and right side of the toolbar itself I need to also tweak via css?

    Here's a snippet of the html that is the left endcap graphic and the toolbar itself:

                            <div id="primaryNavigation">   
                                <img src="/images/primarynav/pn-bgLeft.png" alt="" border="0" height="41" width="12" />  
                                <telerik:RadToolBar ID="RadToolBar1" runat="server" OnButtonClick="ToolBar1_ButtonClick" Skin="">  
                                    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>  
                                    <Items>  
    ... 

    Thx!
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 25 May 2009 Link to this post

    Hello Kevin,

    For the first graphic you should also set its css float property to "left" like this:

    <img src="/images/primarynav/pn-bgLeft.png" alt="" border="0" height="41" width="12" style=" float:left" />    
     

    and for the last graphic  "float: left" should be set to RadToolBar main div:

    .RadToolBar {  
       float:left !important;    
     }  

    Best regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top