How to make Sticky footer in master page, created from Telerik Responsive Web Site template

7 posts, 1 answers
  1. Vasssek
    Vasssek avatar
    143 posts
    Member since:
    Aug 2010

    Posted 05 Mar 2015 Link to this post

    Good afternoon,

    Could somebody give me an advice, how can I make sticky footer in my master page, created from Telerik Responsive Web Site template ?

    First I will try to describe the steps I've done, yet.

    1. Through VS2010 Telerik menu, UI for ASP.NET AJAX - Create New Telerik Project
    2. Choosed Telerik C# Web Forms Site for .NET Framework 4.0
    3. Choosed project type - Responsive Web SiteAfter whole project has been created.

    I put this into  <%--Footer--%> section in MasterPage.master file:
    <telerik:LayoutRow>
                        <Columns>
                            <telerik:LayoutColumn CssClass="footer">
                                <hr />
                                Footer: © 2002-2015 Company Inc, 201 Jones Rd, Waltham, MA 03451
                            </telerik:LayoutColumn>
                        </Columns>
                    </telerik:LayoutRow>

    Then I set in default.css this:
    #wrapper .footer
    {
        background-color: orange;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100px;
        width: 100%;
    }

    And in base.css I set this:
    html {
        position: relative;
        min-height: 100%;
    }
     
    body {
        font: normal 16px "Segoe UI", Arial, sans-serif;
        color: #555555;
        margin: 0 0 125px;
        padding: 25px;
    }
     
    form {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    The result is on this link: http://www.screencast.com/t/8KDAHJQTa

    Question is, how could I achieve something like this ? http://mystrd.at/data/sticky_footer.html

    Thank you for your advice and help.

    Best regards

    Vasssek
  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 10 Mar 2015 Link to this post

    Hi Vaclav,

    Please, find a sample project in the attachment where we have applied a sample solution for achieving a sticky footer. We hope this solution will meet your expectations.

    Regards,
    Magdalena
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vasssek
    Vasssek avatar
    143 posts
    Member since:
    Aug 2010

    Posted 10 Mar 2015 in reply to Magdalena Link to this post

    Hello,

    thank you for your response, but I don't see any attachment. Did you upload it to your thread?

    Thank you

    Vasssek
  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 10 Mar 2015 Link to this post

    Hi Vaclav,

    We apologize for the missing resources, there is a technical problem. We have updated the last post and attached again the sample.

    Regards,
    Magdalena
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Vasssek
    Vasssek avatar
    143 posts
    Member since:
    Aug 2010

    Posted 10 Mar 2015 in reply to Magdalena Link to this post

    Hello,

    thank you for that code example, but it will work just on simple pages layout (without master page,...)

    What I'm trying to do is making sticky footer in original generated master page, created from Telerik Responsive Web Site template as I described above.

    http://www.screencast.com/t/8KDAHJQTa

    Please, show us, how to make sticky footer on that example...

    Thank you

    Best regards

    Vasssek
  7. Answer
    Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 11 Mar 2015 Link to this post

    Hello Vaclav,

    By removing the bottom margin from the <body> element and adding the following CSS styles, you can achieve the sticky footer in the example:
    #wrapper {
        min-height: 100%;
        position: relative;
    }
     
    #MasterLayout {
        min-height: 100%;
    }
     
    html .main {
        box-sizing: content-box;
        padding-bottom: 150px;
    }
     
    #MasterLayout,
    .main + div {
        position: static;
    }

    Where the ".main" is the page layout row after the ".head" row.

    Please, find an example solution in the attachment. We have added your custom styles in the head of the master page.

    Regards,
    Magdalena
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Vasssek
    Vasssek avatar
    143 posts
    Member since:
    Aug 2010

    Posted 11 Mar 2015 in reply to Magdalena Link to this post

    Hello,

    this is exactly what I was looking for :-).

    Thank you for your help...

    Vasssek
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017