Setting RadSplitBar height

5 posts, 1 answers
  1. Gary
    Gary avatar
    3 posts
    Member since:
    Oct 2012

    Posted 13 Nov 2012 Link to this post

    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">
     
    <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>
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 13 Nov 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gary
    Gary avatar
    3 posts
    Member since:
    Oct 2012

    Posted 14 Nov 2012 Link to this post

    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">
     
    <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
  5. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 14 Nov 2012 Link to this post

    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.
  6. Gary
    Gary avatar
    3 posts
    Member since:
    Oct 2012

    Posted 15 Nov 2012 Link to this post

    Thanks again Princy.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017