I have an asp.net MVC project using the most recent version of Telerik controls. I have a shared view with a header at the top, menu on the left side, and a footer on the bottom. In the middle is a section where I use a @RenderBody tag to show the main part of the page. In that body are Telerik controls: grids, reports, drop down boxes, text boxes, etc. On views with grids and reports, I'm unable to keep the footer at the bottom. When there's a grid at the bottom of the view, the footer either is right under the grid (if it's small), not the bottom of the page; or the footer is pushed off the page (if the grid is large). For reports, they go right over the top of the footer or they cover up the footer. I've used this type of footer before without any problems, but I can't figure out how to get them to work with Telerik controls especially since they all interact with the footer differently. I've looked at some of the other questions, but nothing seems to work for a page with Telerik grids and reports.
我有一个使用最新版Telerik控件的asp.net MVC项目。我有一个共享视图,顶部是标题,左侧是菜单,底部是页脚。中间是一个部分,我使用@RenderBody标签来显示页面的主要部分。在那个主体是Telerik控件:网格,报告,下拉框,文本框等。在带有网格和报告的视图上,我无法将页脚保持在底部。当视图底部有一个网格时,页脚位于网格下方(如果它很小),而不是页面的底部;或者页脚被推离页面(如果网格很大)。对于报告,它们会直接在页脚顶部或者它们覆盖页脚。我以前使用过这种类型的页脚没有任何问题,但是我无法弄清楚如何让它们与Telerik控件一起工作,特别是因为它们都与页脚的交互方式不同。我已经看了一些其他问题,但似乎没有任何东西适用于带有Telerik网格和报告的页面。
How do I get my footer to stay at the bottom of the page when using Telerik grids and reports?
使用Telerik网格和报告时,如何让页脚停留在页面底部?
Here is what I'd like to see:
这是我想看到的:
Here are examples of what I am seeing: Footer pushed off the screen by a Telerik grid. 
以下是我所看到的示例:Footer通过Telerik网格推离屏幕。页脚在Telerik网格下方,但不在页面底部。 Telerik报告将页脚推离页面。 Telerik的报道覆盖了页脚。
Here is the code for the shared view:
以下是共享视图的代码:
@using App_Code
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2015.3.1111/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2015.3.1111/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2015.3.1111/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2015.3.1111/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2015.3.1111/kendo.dataviz.default.min.css")" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="~/Content/structure-main.css" />
<link rel="stylesheet" href="~/Content/site.css" />
<link rel="stylesheet" href="~/Content/structure-main.css" />
<script src="@Url.Content("~/Scripts/kendo/2015.3.1111/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/scroller.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2015.3.1111/jszip.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2015.3.1111/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2015.3.1111/kendo.aspnetmvc.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
<style>
.menu ul li a {
list-style: none !important;
display: inline-block !important;
height: 50px !important;
vertical-align: middle !important;
text-align: center;
width: 100px !important;
font-weight: bold;
padding-top: 35px !important;
}
.menu ul li {
text-align: center;
}
html {
background-color: white;
}
.roundedButton {
font-size: 1em !important;
padding: 4px !important;
margin-right: 4px !important;
background-color: #d3dce0 !important;
border: 1px solid #787878 !important;
cursor: pointer !important;
color: #333 !important;
text-decoration: none;
font-weight: bold;
font-size: 15px;
font-family: 'Roboto', sans-serif;
}
html {
background-color: white;
}
footer {
height: 40px !important;
width: 100% !important;
background-color: black !important;
color: #555 !important;
position: static !important;
bottom: 0px !important;
}
.mainPage {
overflow: hidden;
}
</style>
</head>
<body>
<header>
<div class="content-wrapper">
<div>
<img style="padding-left: 50px; width: 162px; height: 70px;" src="../Images/logo.png" />
<div style="float: right;">
Welcome @Html.Raw(Session["CurrUserName"])
@Html.ActionLink("Logout", "Login", null, new { @class = "roundedButton" })
</div>
</div>
</div>
</header>
<div style="float: none;">
<div class="TransitionImage-Box transition-image-desktop skrollable skrollable-between" data-bottom-top="background-position: 50% -50%;" data-top-bottom="background-position: 50% 20%;" style="background-image: url(http://imavex.vo.llnwd.net/o18/clients/da-lubricant/images/Transition_Image/transition_image.jpg); background-attachment: fixed; background-position: 50% -19.3654%;"></div>
<div class="TransitionImage-Box transition-image-tablet" style="background-image: url('http://imavex.vo.llnwd.net/o18/clients/da-lubricant/images/Transition_Image/transition_image.jpg');"></div>
</div>
<div class="mainPage">
@RenderSection("styles", required: false)
@RenderSection("scripts", required: false)
<table style="margin: 0; margin-top: 0;">
<tr>
<td valign="top">
<table>
<tr>
<td>
<br />
<br />
</td>
</tr>
</table>
<div class="menu">
@(Html.Kendo().Menu()
.Name("Menu")
.Orientation(MenuOrientation.Vertical)
.HtmlAttributes(new { style = "height: 100%;" })
.Items(items =>
{
items.Add().Text("Oil Analysis Reports").HtmlAttributes(new { @class = "menuItem" }).Action("OAR_Selection", "Home");
items.Add().Text("Field Sample Reports").HtmlAttributes(new { @class = "menuItem" }).Action("FieldSampleReports", "Home");
items.Add().Text("Fleet Reports").HtmlAttributes(new { @class = "menuItem" }).Action("FleetReports", "Home");
items.Add().Text("Missed Units").HtmlAttributes(new { @class = "menuItem" }).Action("MissedUnits", "Home");
items.Add().Text("Help").HtmlAttributes(new { @class = "menuItem" }).Action("Help", "Home");
}))
</div>
</td>
<td style="padding: 0px; float: left;">
<section class="content-wrapper clear-fix">
@RenderBody()
</section>
</td>
</tr>
</table>
</div>
<footer>
<div style="text-align: center;">
<p>
© @DateTime.Now.Year All rights reserved. Performance Engineered Lubricants
</p>
</div>
</footer>
Here's the code for one of the views:
以下是其中一个视图的代码:
@using MyProject.App_Code
@model MyProject.Models.ModelCustomerDashboard
@{
ViewBag.Title = "Customer Dashboard";
Layout = "~/Views/Shared/_Layout_User.cshtml";
}
<style>
.cartTable td {
border: 1px solid black;
padding: 0;
}
.cartTable thead {
background-color: #1A78C2;
}
a {
text-decoration: none;
}
</style>
@using (Html.BeginForm("CustomerDashboard", "Home"))
{
<div class="breadcrumb">
@Html.Raw(@ClsUtility.GetCurrentCrumb("Customer Dashboard"))
</div>
if (@ViewBag.Message != null && @ViewBag.Message != "")
{
<div id="divErrorMessage" style="color: #1A78C2;">
<br />
@Html.Raw(@ViewBag.Message)
</div>
<br />
<div style="clear: both">
<br />
</div>
}
<div style="text-align: center">
<table style="width: 100%;">
<tr>
<td>
Oil Analysis Dashboard
</td>
</tr>
<tr>
<td>
Location:
@(Html.Kendo().DropDownListFor(m => m.ddLocation)
.Name("ddLocation")
.HtmlAttributes(new { style = "width: 500px;", onchange = "onChange_ddLocation(this)" })
.OptionLabel("Select from List")
.DataTextField("LocationName")
.DataValueField("LocationCode")
.BindTo(Model.locations)
)
</td>
</tr>
</table>
</div>
<div id="divMain" style="text-align:center;">
<table style="width: 100%;">
<tr>
<td>
<table>
<tr>
<td style="width: 50%">
Samples Processed:
@(Html.Kendo().DropDownListFor(m => m.ddTimeframe)
.Name("ddTimeframe")
.HtmlAttributes(new { style = "width: 250px;", onchange = "onChange_ddTimeframe(this)" })
.OptionLabel("Select a timeframe")
.DataTextField("text")
.DataValueField("value")
.BindTo(Model.timeframe)
)
</td>
</tr>
<tr>
<td style="width: 50%">
<div class="chart-wrapper">
@(Html.Kendo().Chart<MyProject.Models.ModelSample>()
.Name("chartSamplesProcessed")
.Legend(legend => legend
.Visible(true)
)
.DataSource(datasource => datasource
.Read(read => read.Action("ReadSamplesProcessed", "Home", new { ddTimeframe = Model.ddTimeframe, ddLocation = Model.ddLocation, custNo = Model.custNo })))
.Series(series => series.Pie(model => model.value, model => model.category, model => model.color)
.Labels(labels => labels
.Template("#= value#%")
.Background("transparent")
.Visible(true)
)
.StartAngle(0)
)
.Tooltip(tooltip => tooltip
.Visible(true)
)
.ChartArea(x => x.Height(300))
)
</div>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr style="text-align:left;">
<td>
Most Recent OARs
</td>
</tr>
<tr>
<td>
@(Html.Kendo().Grid<MyProject.Models.ModelSample>().Name("gridMostRecentOARs")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(2)
.Read(read => read.Action("ReadMostRecentOARs", "Home", new { ddLocation = Model.ddLocation, custNo = Model.custNo }))
)
.Columns(columns =>
{
columns.Bound(m => m.dateTaken).Title("Date Taken").Format("{0:MM/dd/yyyy}");
columns.Bound(m => m.unitNumber).Title("Unit Number");
columns.Bound(m => m.origLocationName).Title("Location");
columns.Bound(m => m.customerNotes).Title("Notes");
})
.Sortable()
.Resizable(resize => resize.Columns(true))
)
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:left">
Samples Received, Now in Process
</td>
</tr>
<tr>
<td colspan="2">
@(Html.Kendo().Grid<MyProject.Models.ModelSample>().Name("gridSamplesReceived")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(m => m.analysisID))
.Batch(true)
.Read(read => read.Action("ReadSamplesReceived", "Home", new { ddLocation = Model.ddLocation, custNo = Model.custNo }))
)
.Columns(columns =>
{
columns.Bound(m => m.origLocationName).Title("Location");
columns.Bound(m => m.unitNumber).Title("Unit Number");
columns.Bound(m => m.compartmentName).Title("Compartment");
columns.Bound(m => m.dateTaken).Title("Date Taken").Format("{0:MM/dd/yyyy}");
columns.Bound(m => m.dateReceived).Title("Date Received").Format("{0:MM/dd/yyyy}");
columns.Bound(m => m.customerNotes).Title("Notes");
})
.Sortable()
.Pageable()
.Resizable(resize => resize.Columns(true))
)
</td>
</tr>
</table>
</div>
@Html.HiddenFor(m => m.dropDownSource)
@Html.HiddenFor(m => m.custNo)
}
1 个解决方案
#1
0
By Default in Telerik reports, page footer stays at bottom and the report footer does not. Still could not find a great answer for the question. I use conditions with page count to show content only in the last pages, page footer.
在Telerik报告中默认情况下,页脚停留在底部而报告页脚不会。仍然找不到这个问题的好答案。我使用具有页数的条件仅在页面页脚的最后页面中显示内容。
#1
0
By Default in Telerik reports, page footer stays at bottom and the report footer does not. Still could not find a great answer for the question. I use conditions with page count to show content only in the last pages, page footer.
在Telerik报告中默认情况下,页脚停留在底部而报告页脚不会。仍然找不到这个问题的好答案。我使用具有页数的条件仅在页面页脚的最后页面中显示内容。