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:
Then I set in default.css this:
And in base.css I set this:
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
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
6 Answers, 1 is accepted
0
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
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.
0
Vasssek
Top achievements
Rank 1
Rank 1
answered on 10 Mar 2015, 09:59 AM
Hello,
thank you for your response, but I don't see any attachment. Did you upload it to your thread?
Thank you
Vasssek
thank you for your response, but I don't see any attachment. Did you upload it to your thread?
Thank you
Vasssek
0
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
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.
0
Vasssek
Top achievements
Rank 1
Rank 1
answered on 10 Mar 2015, 01:33 PM
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
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
0
Accepted
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:
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
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.
0
Vasssek
Top achievements
Rank 1
Rank 1
answered on 11 Mar 2015, 01:05 PM
Hello,
this is exactly what I was looking for :-).
Thank you for your help...
Vasssek
this is exactly what I was looking for :-).
Thank you for your help...
Vasssek