SplitBar icon

[Ian Wells]

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

[Svetlina Anati]

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.

[Ian Wells]

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

[Dobromir]

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.

[Ian Wells]

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

[Martin Roussel]

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

[Vessy]

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

[Martin Roussel]

thanks!