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

Setting RadSplitBar height

4 Answers 227 Views

Splitter

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

Gary asked on 13 Nov 2012, 07:00 PM

SplitterScreenShot.png

Hopefully, this is a simple request. I just want to make the RadSplitBar a little taller so it is easier for our users to grab when resizing their panes. I tried setting the Height property of the RadSplitBar control, but it doesn't change anything. If I need to do this with css, example code would be greatly appreciated. As you can see by my example, my requirement is to use CollapseMode="Both", so I may need to supply taller images for all these situation as well.

I have attached the screen shot of what it looks like by default, here is the page source.

Thanks,

-Gary

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SplitterTest.aspx.cs" Inherits="WebAppTesting.SplitterTest" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<div>

<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" >

<telerik:RadPane ID="RadPane1" runat="server" BackColor="Red">

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Both" Height="20px">

</telerik:RadSplitBar>

<telerik:RadPane ID="RadPane2" runat="server" BackColor="Purple">

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</form>

</body>

</html>

4 Answers, 1 is accepted

answered on 14 Nov 2012, 04:13 AM

Hi Gary,

To increase the RadSplitBar height you should set the SplitBarSize property of the RadSplitter to the desired size value in pixels. Note, however, that if you set it to a very big value there must be problems with the visual appearance because the image which is set as a background of the splitbar is 5px big and thus you should set your own image with the desired proper size instead. Following is the sample code that worked expected at my end.

CSS:

<style type="text/css">

.RadSplitter_Default .rspSlideHeaderCollapseIcon, .RadSplitter_Default .rspCollapseBarCollapse, .RadSplitter_Default .rspCollapseBarHorizontalCollapse

{

background-image: url("../Images/image1.jpg") !important;

height: 20px !important;

}

.RadSplitter_Default .rspCollapseBarExpand, .RadSplitter_Default .rspCollapseBarHorizontalExpand

{

background-image: url("../Images/image2.jpg") !important;

height: 20px !important;

}

</style>

ASPX:

<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" SplitBarsSize="20px">

<telerik:RadPane ID="RadPane1" runat="server" BackColor="Red">

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Both" Height="20px">

</telerik:RadSplitBar>

<telerik:RadPane ID="RadPane2" runat="server" BackColor="Purple">

</telerik:RadPane>

</telerik:RadSplitter>

Hope this helps.

Regards,
Princy.

answered on 14 Nov 2012, 06:03 PM

Princy,

Thank you very much for your reply. I am closer to what I need. However, after plugging in those changes, one problem is the new image is repeating. I added a no-repeat setting to the css, now the image doesn't repeat, but it is cut off. There is also a problem when you hover over the image, it jumps up so it is cut off. The other thing is when you hover over the RadSplitBar (not the image) the desired behavior is to have the bar change to a grey color, it does do something, but the height of the grey bar does not match the new height of the bar. I suspect these are all styling issues, but I don't know the properties to set to fix them.

Is there documentation you could point me to to find these styling settings or a technique for finding the settings with IE?

Here is my latest markup.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SplitterTest.aspx.cs" Inherits="WebAppTesting.SplitterTest" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<style type="text/css">

.RadSplitter_Default .rspSlideHeaderCollapseIcon, .RadSplitter_Default .rspCollapseBarCollapse, .RadSplitter_Default .rspCollapseBarHorizontalCollapse

{

background-image: url("../Images/collapsearrow.ico") !important;

background-repeat: no-repeat;

height: 17px !important;

}

.RadSplitter_Default .rspCollapseBarExpand, .RadSplitter_Default .rspCollapseBarHorizontalExpand

{

background-image: url("../Images/expandarrow.ico") !important;

background-repeat: no-repeat;

height: 17px !important;

}

</style>

<title></title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<div>

<telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal" SplitBarsSize="17px" >

<telerik:RadPane ID="RadPane1" runat="server" BackColor="Red">

<asp:Button ID="btnExpandRed" runat="server" Text="Expand Red"

onclick="btnExpandRed_Click" />

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward">

</telerik:RadSplitBar>

<telerik:RadPane ID="RadPane2" runat="server" BackColor="Purple">

<asp:Button ID="btnExpandPurple" runat="server" Text="Expand Purple"

onclick="btnExpandPurple_Click" />

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</form>

</body>

</html>

Thanks,

-Gary

Accepted

answered on 15 Nov 2012, 04:32 AM

Hi Gary,

The grey color shown on hover of the RadSplitBar is the Background-image of the RadSplitBar. When the height is changed you should set your own image with the desired proper size.Try the following CSS to achieve your scenario.

CSS:

<style type="text/css">

.RadSplitter_Default .rspSlideHeaderCollapseIcon, .RadSplitter_Default .rspCollapseBarCollapse, .RadSplitter_Default .rspCollapseBarHorizontalCollapse

{

background-image: url("../Images/image1.jpg") !important;

height: 17px !important;

background-position: center !important;

position: fixed !important;

background-repeat: no-repeat !important;

}

.RadSplitter_Default .rspCollapseBarExpand, .RadSplitter_Default .rspCollapseBarHorizontalExpand

{

background-image: url("../Images/image2.jpg") !important;

height: 17px !important;

background-position: center !important;

position: fixed !important;

background-repeat: no-repeat !important;

}

.RadSplitter_Default .rspResizeBarHorizontal

{

background-image:url("../Images/image3.jpg") !important;

}

</style>

You can use F12 Developer Tools to find the styling settings in Internet Explorer.

Hope this helps.

Regards,
Princy.