Sliding pane always at the bottom

4 posts, 0 answers
  1. James O'Brien
    James O'Brien avatar
    19 posts
    Member since:
    Oct 2009

    Posted 26 Jul 2010 Link to this post

    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.
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 29 Jul 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. James O'Brien
    James O'Brien avatar
    19 posts
    Member since:
    Oct 2009

    Posted 29 Jul 2010 Link to this post

    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?
  5. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 02 Aug 2010 Link to this post

    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
Back to Top