Change width and image of RadSplitBar

[Kasia]

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

[Svetlina Anati]

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;
        height: 8px !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.

[Santiago Botero]

Hi,

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

Thnak you,
Santiago

[Svetlina Anati]

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.

[Santiago Botero]

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.

[Svetlina Anati]

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.

[John]

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?

[Princy]

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.

[John]

Awesome! That works perfectly.

[pedrotti]

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 !

[Vessy]

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

[Aparna]

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?

[Vessy]

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

[Ralf]

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.

 

[pedrotti]

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

 

 

 

 

[Ralf]

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?

 

[pedrotti]

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