Radgrid remplissez le récipient de la hauteur
J'ai des divs imbriqués, dont l'une contient un Radgrid de contrôle qui doit remplir son récipient.
Essayé de 100% de la hauteur/largeur. N'a pas de travail.
Essayé de positionnement absolu. N'a pas de travail.
Suivi les conseils de Telerik ici. Nope.
Suivi cette post. Uh-Uh.
J'ai essayé de contacter Telerik de soutien. Leur solution a me changer la taille de la divs au-dessus de la grille, mais ce n'est pas le problème (ces divs sont déjà correctement dimensionnés).
Toutes les autres solutions que j'ai trouvé sont une variation de l'un des ci-dessus, mais aucun de ces est se me il. Je me suis cassé le problème en un échantillon master page (la page est vide). Voici le code css et:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="GridTest.master.cs" Inherits="GridTest" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Grid Test</title>
<link href="main-styles.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
</head>
<body>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function gridCreated(sender, eventArgs) {
var scrollArea = sender.GridDataDiv;
var parentHeight = $('#inner-content').height();
var gridHeader = sender.GridHeaderDiv;
scrollArea.style.height = parentHeight - gridHeader.clientHeight + "px";
}
</script>
</telerik:RadCodeBlock>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="banner">
</div>
<div id="wrapper1">
<div id="wrapper2">
<div id="sidepanel">
Action</div>
<div id="content-box">
<div id="panel-header">
Panel header</div>
<div id="inner-content">
<telerik:RadGrid ID="TestGrid" runat="server">
<ClientSettings>
<Scrolling AllowScroll="True" UseStaticHeaders="true" />
<ClientEvents OnGridCreated="gridCreated" />
</ClientSettings>
</telerik:RadGrid>
</div>
<!-- inner-content -->
</div>
<!-- content-box -->
</div>
<!-- wrapper2 -->
</div>
<!-- wrapper1 -->
</form>
</body>
</html>Et le css:
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input
{ margin:0; padding:0 }
h1, h2, h3, h4, h5, h6, pre, code { font-size:100%; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
font-family: Verdana, Arial, sans-serif;
line-height: 140%;
color: #fff;
background: #301849;
}
p {
font-size: 1em;
padding-bottom: 1em;
padding-top: 0.8em;
}
#banner
{
background-color: Blue;
position: fixed;
width: 100%;
height: 100px;
}
#wrapper1 {
position: relative;
top: 110px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
#wrapper2 {
position: absolute;
height: 100%;
top: 0px;
right: 0px;
bottom: 110px;
left: 0px;
overflow: hidden;
background-color: Black;
}
#sidepanel
{
background-color: Orange;
position: absolute;
width: 300px;
height: 100%;
top: 0px;
left: 0px;
overflow: auto;
}
#content-box {
position: absolute;
height: 100%;
width: auto;
top: 0px;
right: 0px;
bottom: 0px;
left: 310px;
background-color: Gray;
}
#panel-header
{
position: absolute;
top: 0px;
right: 0px;
left: 0px;
height: 50px;
background-color: Green;
}
#inner-content
{
position: absolute;
background-color: Olive;
top: 50px;
right: 0px;
bottom: 0px;
left: 0px;
}
#TestGrid
{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}OriginalL'auteur Sean Rich | 2011-10-09
Vous devez vous connecter pour publier un commentaire.
J'ai eu ce problème aussi. Le rad de la grille était toujours rendu avec 300pxs - dans un style intraligne, pas même une classe css. La solution que j'ai trouvé de plus facile que de tout ce qui est suggéré par telerik ou trouvées sur le web.
Il suffit d'ajouter ce pour la balise style de votre page et vous êtes fait (peut-être modifier à partir de la classe à l'identification réelle de la grille, mais vous obtenez l'essentiel):
TaDa!
OriginalL'auteur Sergiu
Essayez ceci:
Et ce:
Je ne suis pas un expert en CSS mais j'ai quelque chose me dit que vos problèmes sont liés à la
position:absoluteque vous avez sur votre conteneur de divs. Le positionnement absolu est principalement utilisé pour les variables des divs en collaboration avec big z-index. Je voudrais essayer à la mise en position:relative ou même de supprimer tous lespositiondirectives et d'utiliserpaddingoumargin. Par exemple, au lieu d'avoirposition:absolute; top: 50px;vous pouvez supprimerpositionet tout simplementmargin-top:50px;J'ai fait quelques mods pour le balisage et le javascript et vous avez quelque chose à travailler, même si je suis déçu de ce que j'ai du avoir recours à javascript pour obtenir Telerik les contrôles de mise en page correctement. Merci encore.
OriginalL'auteur Icarus
Je viens de tomber sur ce problème et pensé que je vous ferais partager mon javascript/jquery solution. Je vois que vous êtes en utilisant statique en-têtes, et qui pour moi a été la rupture de défilement horizontal après j'ai redimensionné la grille. Cette solution ne prend pas en pause le défilement horizontal avec UseStaticHeaders=true et correctement la taille de la grille de 250px moins de la fenêtre de la hauteur.
OriginalL'auteur fix