Change width and image of RadSplitBar

17 posts, 0 answers
  1. Kasia
    Kasia avatar
    6 posts
    Member since:
    Jun 2009

    Posted 10 Aug 2009 Link to this post

    Is it possible to change the width and background image of the SplitBar as well as the middle arrow image?  I have tried setting the width within the RadSplitBar tag but it did not take.

          <telerik:RadSplitter ID="radSplitter" runat="server"
            <telerik:RadPane ID="paneLeft" runat="server">Left Side</telerik:RadPane> 
            <telerik:RadSplitBar ID="splitBar" runat="server" width="20" CollapseMode="Forward" /> 
            <telerik:RadPane ID="paneRight" runat="server">Right Side</telerik:RadPane> 
          </telerik:RadSplitter> 

    Thank you,
    Kasia
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 13 Aug 2009 Link to this post

    Hi Kasia,

    You can use the following CSS selectors:

    <style type="text/css">      
           
        .rspCollapseBarExpand,        
        .rspCollapseBarExpandOver        
        {        
           background#1E90BB url(close.gif) no-repeat 0 0!important;      
           height:8px!important;      
           width:23px!important;      
        }       
              
        .rspCollapseBarCollapse,        
        .rspCollapseBarCollapseOver      
        {        
           background#1E90BB url(close.gif) no-repeat 0 0!important;      
           height:8px!important;      
           width:23px!important;      
        }      
              
        .rspResizeBar,      
        .rspResizeBarOver,      
        .rspCollapseBarWrapper      
        {      
            background:#5f5c5a!important;      
            height8px !important;      
                  
        }      
      </style>   

    You can also set the size of teh splitbar by setting the SpliBarSize property of the splitter as well.


    All the best,
    Svetlina
    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. Santiago Botero
    Santiago Botero avatar
    14 posts
    Member since:
    Nov 2009

    Posted 11 Nov 2009 Link to this post

    Hi,

    The boutons to expand/collapse are very small. Can't i modifie the size of this boutons ?

    Thnak you,
    Santiago
  4. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 11 Nov 2009 Link to this post

    Hello Santiago,

    The embedded buttons are actually images and thus you cannot modify their size by using CSS. However, you can prepare your own images, as big as you need and use the styles I provided in my reply - just put url to your images in the background setting as shown with close.gif image.

    Greetings,
    Svetlina
    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.
  5. Santiago Botero
    Santiago Botero avatar
    14 posts
    Member since:
    Nov 2009

    Posted 11 Nov 2009 Link to this post

    Thast's great, I thought that if i put a larger image the image was going to be croped.
    Since the height in the CSS is 8px and is marked to important.

    Best regards,

    Santiago.
    PS: Yours controls are genial.
  6. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 11 Nov 2009 Link to this post

    Hi Santiago ,

    You can put whatever pixel value you need in the CSS I have provided. The keyword !important is actually part of the CSS syntax and it is used to give a higher priority to your style and to prevent the default embedded styles to overridde yours. This being said, there is no problem to set, let's say

        .rspResizeBar,      
        .rspResizeBarOver,      
        .rspCollapseBarWrapper      
        {      
            background:#5f5c5a!important;      
            height: 18px !important;      
                  
        }   

    as far as you have the !important jkeyword, it will get applied.

    You can find more information about this below:

    http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

    I hope that my explanation and teh provided resource are helpful, let me know if you have additional questions.


    Sincerely yours,
    Svetlina
    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.
  7. John
    John avatar
    3 posts
    Member since:
    Feb 2012

    Posted 13 Nov 2012 Link to this post

    I get how to change the images, but I need to move the images to the top of the RadSplitBar (vertically-oriented splitter). In other words, change the alignment of the images in the vertical split bar to the top.

    How can I do this?
  8. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 13 Nov 2012 Link to this post

    Hi John,

    Try overriding the default CSS as follows to achieve your scenario.

    CSS:
    <style type="text/css">
        .RadSplitter_Default .rspResizeBar
        {
            margin-top: 0px !important;
            position: fixed !important;
        }
    </style>

    Hope this helps.

    Regards,
    Princy.
  9. John
    John avatar
    3 posts
    Member since:
    Feb 2012

    Posted 14 Nov 2012 Link to this post

    Awesome! That works perfectly.
  10. bouchart
    bouchart avatar
    41 posts
    Member since:
    Apr 2011

    Posted 28 Nov 2012 Link to this post

    Hello
    Great post !

    It work very fine between to vertical pane....but in my page a have also on the top, an RadSplitbar beween 2 horizontal pane
    An this one is not changing !
    How can I do for applying (one or two css differents)

    Thank you for your help and sorry for my English !
  11. Vessy
    Admin
    Vessy avatar
    1660 posts

    Posted 29 Nov 2012 Link to this post

    Hi LEVEFAUDE,

    The class of the Splitbars placed inside a horizontal Splitter is rspResizeBarHorizontal, so you will need to apply the following styles:

    <style type="text/css">
        .RadSplitter_Default .rspResizeBar
        {
            margin-top: 0px !important;
            position: fixed !important;
        }
         
        .RadSplitter_Default .rspResizeBarHorizontal
        {
            margin-left: 0px !important;
            position: fixed !important;
        }
    </style>

    Regards,
    Vesi
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  12. Aparna
    Aparna avatar
    1 posts
    Member since:
    Aug 2016

    Posted 19 Aug 2016 Link to this post

    I am trying to use an image in css as suggested in the initial reply but the arrow on the split bar is still visible. I dont want to show that. I want to show only my image. Any solution?
  13. Vessy
    Admin
    Vessy avatar
    1660 posts

    Posted 23 Aug 2016 Link to this post

    Hi Aparna,

    Can you send us the exact configuration and custom styling you are using, so we can examine it and advice you further? Can you test whether switching to Classic render mode resolves the issue?

    Regards,
    Vessy
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  14. Ralf
    Ralf avatar
    4 posts
    Member since:
    Nov 2014

    Posted 05 Jun Link to this post

    Is there a solution for the question above from Aparna?

    I am seeing this issue as well, using lightweight rendering. Changing to "Classic" does appear to resolve it.  I'm using the "Simple" skin, I've tried several others but the skin doesn't appear to matter.

     

  15. bouchart
    bouchart avatar
    41 posts
    Member since:
    Apr 2011

    Posted 06 Jun in reply to Ralf Link to this post

    Hello

     

    I have a css file that control my split bar

     

    /* SplitBar VERTICAL */

    .rspCollapseBarExpand, .rspCollapseBarExpandOver {
        /* SplitBar Fermé */
        background: url('../../Images/Detail.png') no-repeat center 0 !important;
        height: 260px !important;
        width: 5px !important;
    }

    .rspCollapseBarCollapse, .rspCollapseBarCollapseOver {
        background: #1E90BB !important;
        height: 100px !important;
        width: 5px !important;
    }

    /* SplitBar HORIZONTAL */

    .rspCollapseBarHorizontalExpand, .rspCollapseBarHorizontalCollapse {
        /* SplitBar Fermé */
        background: url('../../Images/DetailRecherche.png') no-repeat center 0 !important;
        height: 5px !important;
        width: 300px !important;
    }

    Note that I you want to know what fonction you need to use

    In FF open the developpement tool, and inspect element... it show all fonctions used

     

    Hope this function help you

     

    Anne

     

     

     

     

  16. Ralf
    Ralf avatar
    4 posts
    Member since:
    Nov 2014

    Posted 07 Jun in reply to bouchart Link to this post

    Thanks Anne,

    The issue appears to be that both images are being rendered. Mine set via the background tag as well as the original Telerik image. Only happens with lightweight rendering.  What rendering mode are you using?

     

  17. bouchart
    bouchart avatar
    41 posts
    Member since:
    Apr 2011

    Posted 07 Jun in reply to Ralf Link to this post

    Hi Ralt

     

    I m not sure, but I think it was lightweight rendering

    I leave my job this night and i remove all files on my computer

     

    Sorry

     

     

Back to Top