2
J'ai un projet MVC asp.net utilisant la version la plus récente des contrôles Telerik. J'ai une vue partagée avec un en-tête en haut, un menu sur le côté gauche et un pied de page en bas. Au milieu est une section où j'utilise un tag @RenderBody pour montrer la partie principale de la page. Dans ce corps sont les contrôles Telerik: les grilles, les rapports, les listes déroulantes, les zones de texte, etc. Sur les vues avec des grilles et des rapports, je suis incapable de garder le pied de page en bas. Quand il y a une grille au bas de la vue, le pied de page est soit juste sous la grille (si elle est petite), pas au bas de la page; ou le pied de page est poussé hors de la page (si la grille est grande). Pour les rapports, ils vont directement au-dessus du pied de page ou ils couvrent le pied de page. J'ai déjà utilisé ce type de pied de page sans aucun problème, mais je n'arrive pas à comprendre comment les faire fonctionner avec les contrôles Telerik, car ils interagissent tous différemment avec le pied de page. J'ai examiné d'autres questions, mais rien ne semble fonctionner pour une page avec des grilles et des rapports Telerik. Comment puis-je faire en sorte que mon pied de page reste au bas de la page lorsque j'utilise des grilles et des rapports Telerik?Comment obtenir un pied de page au bas de la page lors de l'utilisation des commandes Telerik?
Voici ce que je voudrais voir: 
Voici des exemples de ce que je vois: pied poussé hors de l'écran par une grille Telerik. 
Pied de page sous la grille Telerik, mais pas en bas de la page. 
Le rapport Telerik repousse le bas de la page. 
Le rapport Telerik couvre le pied de page. 
Voici le code de la vision commune:
@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>
Voici le code pour l'une des vues:
@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)
}