Rad Sliding Zone

2 posts, 0 answers
  1. shafeequl
    shafeequl avatar
    3 posts
    Member since:
    Feb 2014

    Posted 07 Apr 2014 Link to this post

    I just started to develop asp.net web application using Rad Controls.In a web page i added a radtoolbar,radsplitter radpane radslidingzone,radsliding pane as shown in attached image.I have some doubts about the controls.And i explained my questions in the attached image.
    Am a beginer in rad controls.
    Please let me out of this.
  2. Vessy
    Vessy avatar
    1641 posts

    Posted 10 Apr 2014 Link to this post

    Hi Shafeequl,

    Thank you for contacting the Telerik support.

    The answers to the questions it he attached image are as follows:

    How can I access this part of a RadSlidingPane, I need to change color and other properties? How can I set this part to 100% height?
    This is the SlidingZone's ab container and you can access the each tab in it with the following selector:
    .RadSplitter div.rspPaneTabContainer
        background-image: none !important;
        background-color: blueviolet;
        cursor: help;
    It is not possible to make the tabs occupy 100% of the height, but you can set the BackColor of the SlidingZone's parent RadPane in order to make it look like a part of the tabs.

    Can I remove this title part?
    Yes, you can do with a similar CSS style:
    .RadSplitter tr.rspSlideHeader
        display: none;

    How can I change the background color of a toolbar?
    In order to add background color to the ToolBar, you will need first to remove the used background image in a similar way:
    .RadToolBar div.rtbMiddle
        background-image: none !important;
        background-color: blueviolet;

    This control need to be anchor to right side of tool bar (width 100%). How can I achieve that?
    I am not quite sure whether I understand the exact issue properly. If you want to float the split button the the rightmost part of the ToolBar, it could be achieved by making the split button absolutely positioned. For this purpose you will need first to make the ToolBar relatively positioned:
    <telerik:RadToolBar ID="RadToolbar1" runat="server" Width="100%" CssClass="toolBarPosition">
            <telerik:RadToolBarButton Text="Compose"></telerik:RadToolBarButton>
            <telerik:RadToolBarButton Text="Reply"></telerik:RadToolBarButton>
            <telerik:RadToolBarButton Text="Reply to all"></telerik:RadToolBarButton>
            <telerik:RadToolBarButton Text="Forward"></telerik:RadToolBarButton>
                    <telerik:RadToolBarButton ImageUrl="Images/telerik_16x16.png"></telerik:RadToolBarButton>
                    <telerik:RadToolBarButton Text="Button 1"></telerik:RadToolBarButton>
                    <telerik:RadToolBarButton Text="Button 2"></telerik:RadToolBarButton>
        position: relative;
    .RadToolBar div li.rtbSplBtn
        position: absolute;
        right: 50px;

    For your convenience I am attaching a simple page with the above configurations applied. I hope this information will be helpful for you.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top