SplitBar icon

8 posts, 0 answers
  1. Ian Wells
    Ian Wells avatar
    25 posts
    Member since:
    Jul 2009

    Posted 18 May 2010 Link to this post

    Hi Folks,

    Does anyone please know if it is possible to change the arrow icon on the splitbar? Reason being is that we have developed a web portal using the splitbars, but some users are having difficulty in clicking on the correct one when two splitbars are next to each other.

    We have made the splitbars wider with the 'SplitBarSize' property but now need to implement our own expand/collapse icon if this is at all possible.

    Cheers,
    Ian W
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 18 May 2010 Link to this post

    Hello Ian Wells,

    To set your own images instead of teh default ones you should override them by providing higher priority to your custom CSS.

    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;        
            height: 8px !important;        
                       
        }        
      </style>


    where close.gif should be replaced with your custom image. The specified sizes are also only for demonstration purposes and you can change them as you want. Note, that you should use the keyword !important in order to give a higher priority to your custom CSS and not to let it be overridden by the embedded styles.

    Note, also, that the provided CSS is for the 2010.1.415 version and for vertical orientation - if you have other settings and this does not work or you need further assistance with extracting the required CSS selectors, provide some markup and detailed explanations and I will do my best to help.

    All the best,

    Svetlina
    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. Ian Wells
    Ian Wells avatar
    25 posts
    Member since:
    Jul 2009

    Posted 25 May 2010 Link to this post

    Hi Svetlina,

    Thank you for your reply. This solution doesn't quite work as expected. It does put an icon into the splitbar but it is behind the sliptbar arrow. Is there a way to get rid of the arrow and replace it with my own image that can be clicked on the collpase/expand the splitbar?

    This is the markup for one of my splitbars:

    <telerik:RadSplitBar ID="rsbFieldsToImage" runat="server" Height="150" CollapseMode="Both" EnableResize="false" /> 

    Thanks
    Ian W


  5. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 25 May 2010 Link to this post

    Hi Ian,

    I tried to reproduce the reported behavior but to no avail. Could you please provide more detailed information regarding the specific scenario.
    1. Which version of RadControls for ASP.NET AJAX you are using in your application?
    2. Under which browser and its version this behavior occurs?
    3. Could you please provide a sample runnable project that reproduces the problem?
    4. What are the exact steps to reproduce this behavior.

    For your convenience I have attached my test project. Could you please, modify it to a point where the problem occurs and send it back so we can investigate it further?

    Regards,
    Dobromir
    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. Ian Wells
    Ian Wells avatar
    25 posts
    Member since:
    Jul 2009

    Posted 26 May 2010 Link to this post

    Hi Dobromir,

    Thank you very much for your reply. Your solution worked perfectly and I have now sorted the issue I had thanks to your teams help.

    Regards,
    Ian W
  7. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 15 Oct 2012 Link to this post

    Hi,

    Is it possible to hide the splitbar but keep visible the button only? The closest I got was to set the bar background to transparent but playing with borders doesnt seem to help.

    .rspResizeBar,       
        .rspResizeBarOver,       
        .rspCollapseBarWrapper       
        {       
            background:transparent!important;                
        }

    TIA
  8. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 16 Oct 2012 Link to this post

    Hi Tia,

    The right border of the Splitbar comes from itself, but the left one comes from the Pane. You could try the following CSS styles:
    <style type="text/css">
        .rspResizeBar, .rspResizeBarOver, .rspCollapseBarWrapper
        {
            background: transparent !important;
            border: none !important;
        }
         
        .rspPane
        {
            border-style: none !important;
        }
         
        /* If you use a Horizontal Splitter
        .rspResizeBarHorizontal, .rspResizeBarHorizontalOver, .rspCollapseBarHorizontalWrapper
        {
            background: transparent !important;
            border: none !important;
        }
         
        .rspPaneHorizontal
        {
            border-style: none !important;
        }*/
    </style>


    Kind 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.
  9. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 16 Oct 2012 Link to this post

    thanks!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017