Sliding pane always at the bottom

[James O'Brien]

Hi,

I am trying to create a login panel for my website. I need to add a bar at that will stay always at the bottom, even when scrolling down the page. So the panel will open/slide up on click.

This is what I have so far. the problem is that the panel is 100% of the Height even when I set it to 42px.

        

<style type="text/css">
            .login-badge{ width:100%; height:42px; display:block; position:absolute; bottom:0; left:0; background-color:Black; z-index:9999; }
</style>

<telerik:RadSplitter ID="RadSplitter1" runat="server" FullScreenMode="true" CssClass="login-badge" >       

            <telerik:RadPane ID="RadPane1" runat="server">       

                <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" SlideDirection="top" > 

                    <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" EnableDock="false">

                    </telerik:RadSlidingPane>               

                </telerik:RadSlidingZone>

            </telerik:RadPane>
</telerik:RadSplitter>

See attachments to have a better idea of what I'm trying to create.

Thank you.

[Dobromir]

Hi James,

By design, RadSplitter's size is dynamically calculated and set to the RadSplitter's DOM element as an inline style, thus CSS Class selector has lower priority. To avoid this problem you need to set the Height property of the splitter or add !important to the CSS Class declaration.

In addition, to set a HTML element to be "docked" at a specific place on the page you need to use position: fixed CSS property. Also, FullScreenMode property is obsolete and does not have any effect.

Here is the modified mark-up with the above mentioned fixes:

<style type="text/css">
    .login-badge{position:fixed; bottom:0; left:0; background-color:Black; z-index:9999; }
</style>

<telerik:RadSplitter ID="RadSplitter1" runat="server" CssClass="login-badge" Width="100%" Height="42px">
    <telerik:RadPane ID="RadPane1" runat="server">
        <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" SlideDirection="Top">
            <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" EnableDock="false" Height="300px">
            </telerik:RadSlidingPane>
        </telerik:RadSlidingZone>
    </telerik:RadPane>
</telerik:RadSplitter>

Greetings,
Dobromir
the Telerik team

[James O'Brien]

Thanks. I was able to get that working. Now I have this working in a user contrl to implement it on my website.
One thing that I was unable to do is to collapse the panel once that I click on the RadSlideingPane and expands it. I would like to click the same RadSlideingPane and collapse it.
I also need to be able to control the Pane with a button outside of the RadSplitter. I was able to do it when I have the Splitter code in the same document but when I added the Splitter in a user control I was unable to use this:

<asp:Button ID="OpenBadgeButton" runat="server" Text="Register"
            onclick="OpenBadgeButton_Click" />



protected void OpenBadgeButton_Click(object sender, EventArgs e)
    {
        LoginBadgeZone.ExpandedPaneId = LoginBadgeSlidingPane1.ID;
    }

 any ideas?

[Dobromir]

Hi James,

I am not quite sure I understand the scenario. If you want to make the RadSlidingPane's tab to toggle expand / collapse of the pane on click - RadSplitter does not provide such functionality out-of-the-box. Could you please describe in more details what exactly you are trying to achieve or open a support ticket and provide a sample project?

Regarding your second question: The splitter control is not accessible from the page when it is inside an User Control because the User Control is an INamingContainer. In order to get reference to the splitter you can use one of the following approaches:

• Create a property of the user control that returns a reference to the RadSplitter
• Use the FindControl() method of the UserControl object to get a reference to the RadSplitter control.

Best regards,
Dobromir
the Telerik team