Tab position

[Jon]

Hi,
I'm trying to work out how to get a tab shown to the right with a horizontal sliding zone.  At the moment I have a panel with a search popup panel under it.  Looks good but would look better if the tab button that opens the search panel was on the right hand side rather than the left - the accompanying image shows what I want to achieve...

Regards,

Jon

[Marin Bratanov]

Hello Jon,

I hope I have understood your scenario correctly. If that is the case a simple float: right will suffice to align the element to the right:

    <telerik:RadSplitter runat="server" id="RadSplitter1"  Orientation="Horizontal">
    <telerik:RadPane runat="server" ID="RadPane1">
        <telerik:RadSlidingZone runat="server" ID="RadSlidingZone1" Width="22px" >
            <telerik:RadSlidingPane runat="server" ID="RadSlidingPane1" IconUrl="~/Images/title.jpeg" >
                <div style="width: 50px; height: 20px; background-color:yellow; float: right;">search</div>
                <div style="clear: both;"><%--This element is used to clear the other content, depending on your scenario you might not need it--%></div>
                some other content
            </telerik:RadSlidingPane>
        </telerik:RadSlidingZone>
    </telerik:RadPane>
    <telerik:RadPane runat="server" ID="RadPane2"></telerik:RadPane>
</telerik:RadSplitter>

If that is not the case please send us a simple page that isolates your case and some more information on the expected behavior so that we can provide a more accurate answer.


Greetings,
Marin
the Telerik team

[Jon]

Hi Marin,

Yeah sorry - you've misunderstood.  The bit the I want to right align is the tab rather than the content.  The tab being button rendered with the Title and IconURL specified in the radslidingpane (as below).

<telerik:RadSlidingPane ID="Radslidingpane4" Title="Filter Options" runat="server" Height="122px"
EnableDock="false" EnableResize="false" IconUrl="/Images/Icons/16/zoom.png" BackColor="#888888" >

Looking at the source it looks like the div with this id: RAD_SLIDING_PANE_TAB_Radslidingpane4 is more or less the one I need to right align.  Is it a case of right aligning the rspPaneTabContainer class?

Best Regards,

Jon

[Marin Bratanov]

Hello Jon,

I am sorry for misunderstanding your request. Yet the approach is the same - locate the desired element (via Firebug for example)  and float it to the right:

.rspPaneTabContainer .rspPaneTabContainerExpanded,
.rspPaneTabContainer
{
    float: right !important;
}

You may also want to cascade this rule to make it more specific so that it affects only the desired sliding zone. The easiest way to do that is to use its parent pane's CssClass property.


Best wishes,
Marin
the Telerik team

[Jon]

Thanks Marin,

That was what I was looking for.

I do try to use the firebug type tools but often find them rather hard to work with as it isn't always clear what the ramifications will be for changing something.  The way my luck works I'd end up causing a nasty cascade onto other pages!

Regards,

Jon