This is a migrated thread and some comments may be shown as answers.

Sliding pane always at the bottom

3 Answers 68 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
James O'Brien
Top achievements
Rank 1
James O'Brien asked on 26 Jul 2010, 07:09 PM
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.

3 Answers, 1 is accepted

Sort by
0
Dobromir
Telerik team
answered on 29 Jul 2010, 12:32 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
James O'Brien
Top achievements
Rank 1
answered on 29 Jul 2010, 08:33 PM
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?
0
Dobromir
Telerik team
answered on 02 Aug 2010, 05:41 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Splitter
Asked by
James O'Brien
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
James O'Brien
Top achievements
Rank 1
Share this question
or