Splitter borders

4 posts, 1 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 30 Jun 2011 Link to this post

    Hi All,

    I'm able to use bordersize="0" on a splitter to make the outer borders disappear.  But inside that there is a sliding pane that I want to have a 1px border around - otherwise it looks kind of weird.  I can do that via some CSS as per examples in this forum however if I had a second sliding pane on that page the CSS would apply to that as well even if I didn't want it.

    I'm about to look into if I can incorporate some form of id based selection into the CSS tag but beyond that is there a way yet to set the borders within the slidingpane's tag?

    EDIT:
    Trying out the instance based CSS doesn't work - perhaps because the ID isn't what you specify in the CSS but rather made up from the parent splitter name too or maybe because my CSS is so rusty!  The CSS I tried is shown below:

    #Radslidingpane4 .RadSplitter .rspSlidePane .rspSlideContainer
    {
        border:solid 1px black;       
    }




    Regards.

    Jon
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 01 Jul 2011 Link to this post

    Hello Jon,

    Please note first, that some of the borders are achieved via CSS background images, such as the resize handle. Other than that - you can use the RadSlidingPane's CssClass property to set a custom CSS class for its content that you can use to make your selectors more specific:
    .myBorders
    {
        border: 2px solid red;
    }

    and the markup:
    <telerik:RadSplitter runat="server" id="rs1" BorderSize="0">
        <telerik:RadPane runat="server" ID="rp1" CssClass="myClass">
            <telerik:RadSlidingZone runat="server" ID="rsz1" Width="22px" >
                <telerik:RadSlidingPane runat="server" ID="rsp1" Title="title" EnableResize="false" CssClass="myBorders" >
                </telerik:RadSlidingPane>
            </telerik:RadSlidingZone>
        </telerik:RadPane>
        <telerik:RadPane runat="server" ID="rp2"></telerik:RadPane>
    </telerik:RadSplitter>


    All the best,
    Marin
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 01 Jul 2011 Link to this post

    Thanks Marin,

    That worked with the added benefit that it didn't extend the borders beyond the normal splitter with - using the method I mentioned resulted in the sliding pane being 2 px too wide.

    The only issue remaining is how would I go about getting a border around the title of the sliding pane.  

    Regards,

    Jon
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 04 Jul 2011 Link to this post

    Hello Jon,

    I am glad I was able to help :)

    The easiest way to do such customizations is to inspect the output HTML in a tool like FireBug or IE Dev ToolBar and locate the element that you need and then cascade the CSS rule to make it specific enough.

    By using this approach on the code from my previous post I came up with the following CSS rule:
    .myClass .rspSlideHeader table
     {
         border: 2px solid black !important;
     }



    All the best,
    Marin
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top