This is a migrated thread and some comments may be shown as answers.

Change width and image of RadSplitBar

16 Answers 402 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Kasia
Top achievements
Rank 1
Kasia asked on 10 Aug 2009, 09:12 PM
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

16 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 13 Aug 2009, 01:43 PM
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.
0
Santiago Botero
Top achievements
Rank 1
answered on 11 Nov 2009, 01:25 PM
Hi,

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

Thnak you,
Santiago
0
Svetlina Anati
Telerik team
answered on 11 Nov 2009, 01:39 PM
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.
0
Santiago Botero
Top achievements
Rank 1
answered on 11 Nov 2009, 01:49 PM
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.
0
Svetlina Anati
Telerik team
answered on 11 Nov 2009, 01:58 PM
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.
0
John
Top achievements
Rank 1
answered on 13 Nov 2012, 04:37 PM
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?
0
Princy
Top achievements
Rank 2
answered on 14 Nov 2012, 05:03 AM
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.
0
John
Top achievements
Rank 1
answered on 14 Nov 2012, 01:58 PM
Awesome! That works perfectly.
0
pedrotti
Top achievements
Rank 1
answered on 28 Nov 2012, 11:05 AM
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 !
0
Vessy
Telerik team
answered on 29 Nov 2012, 04:02 PM
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.
0
Aparna
Top achievements
Rank 1
answered on 20 Aug 2016, 01:03 AM
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?
0
Vessy
Telerik team
answered on 23 Aug 2016, 03:10 PM
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.
0
Ralf
Top achievements
Rank 1
answered on 05 Jun 2017, 08:10 PM

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.

 

0
pedrotti
Top achievements
Rank 1
answered on 06 Jun 2017, 07:51 AM

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

 

 

 

 

0
Ralf
Top achievements
Rank 1
answered on 07 Jun 2017, 03:16 PM

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?

 

0
pedrotti
Top achievements
Rank 1
answered on 07 Jun 2017, 03:23 PM

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

 

 

Tags
Splitter
Asked by
Kasia
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Santiago Botero
Top achievements
Rank 1
John
Top achievements
Rank 1
Princy
Top achievements
Rank 2
pedrotti
Top achievements
Rank 1
Vessy
Telerik team
Aparna
Top achievements
Rank 1
Ralf
Top achievements
Rank 1
Share this question
or