Splitter borders

[Jon]

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

[Marin Bratanov]

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

[Jon]

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

[Marin Bratanov]

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