[Solved] Slider Top Border

[Jason Bourdette]

I'm using a slider with a tab control inside the slider, and i'd like to turn off the 1px border that runs along the top of the slider, but keep the side and bottom borders. thanks!

 

[Marin Bratanov]

Hello Jason,

Are you, per chance, referring to a RadSlidingPane in a RadSplitter? I am asking because I am not sure how you could add a RadTabStrip inside a RadSlider control. Thus, can you post a simple runnable version of your markup so we can see what is going on?

In the meantime, I can suggest inspecting the rendered HTML with the browser dev toolbar so you can find a CSS Rule that will override the built-in border in order to remove it.

Regards,

Marin Bratanov
Telerik

[Jason Bourdette]

Sorry, I should have been more clear. I'm using an outer splitter to divide the page into a right/left side. Inside the splitter are RadPanes with a RadTabStrip on the right side slider and a RadMultiPage control.

When looking at the debug tools in Chrome is show the 1px border is coming from a table element with id=RadSplitter_ct100_contentplaceholder1_innersplitter" class="RadSplitter RadSplitter_Windows7"

 I tried overriding that class with my own style but it didn't work. thanks

[Marin Bratanov]

Hi Jason,

I suppose that the following code can be used to remove th border:

function OnClientLoad(sender, args) {
    $telerik.$("table", sender.get_element()).first().css("border-top", "0");
}

where this is attached to the OnClientLoad event of the splitter. It gets the table that has this border and removes it.

If this does not help, I would advise that you post some markup that showcases the problem. Here is the full code I used for testing so you can use that as base:

<script>
    function OnClientLoad(sender, args) {
        $telerik.$("table", sender.get_element()).first().css("border-top", "0");
    }
</script>
<telerik:RadSplitter ID="RadSplitter1" runat="server" OnClientLoad="OnClientLoad">
    <telerik:RadPane ID="RadPane1" runat="server" Width="30%">left pane</telerik:RadPane>
    <telerik:RadPane ID="RadPane2" runat="server" Width="70%">
        <telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1">
            <Tabs>
                <telerik:RadTab Text="first"></telerik:RadTab>
                <telerik:RadTab Text="second"></telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage runat="server" ID="RadMultiPage1">
            <telerik:RadPageView runat="server" ID="RadPageView1">
                pageView 1
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="RadPageView2">
                pageView 2
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </telerik:RadPane>
</telerik:RadSplitter>

Regards,

Marin Bratanov
Telerik

[Jason Bourdette]

Thanks!! That works. I was hoping for something server side? either a property of the slider/pane, or some way to modify the style sheet server side. Thanks