Change width and image of RadSplitBar

13 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. UI for ASP.NET Ajax is Ready for VS 2017
  4. 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
  5. 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.
  6. 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.
  7. 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.
  8. 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?
  9. 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.
  10. John
    John avatar
    3 posts
    Member since:
    Feb 2012

    Posted 14 Nov 2012 Link to this post

    Awesome! That works perfectly.
  11. LEVEFAUDE
    LEVEFAUDE avatar
    39 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 !
  12. Vessy
    Admin
    Vessy avatar
    1389 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.
  13. Aparna
    Aparna avatar
    1 posts
    Member since:
    Aug 2016

    Posted 19 Aug 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?
  14. Vessy
    Admin
    Vessy avatar
    1389 posts

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