Radgrid fill container height

Question

I have some nested divs, one of which contains a Radgrid control which needs to fill its container.

Tried 100% height/width. Didn't work.
Tried absolute positioning. Didn't work.
Followed advice from Telerik here. Nope.
Followed this post. Uh-uh. I tried contacting Telerik support. Their solution had me changing the size of the divs above the grid, but this isn't the problem (those divs are already sized properly). All other solutions I've found are a variation of one of the above, but none of these is getting me there. I broke the problem down into a sample master page (the client page is empty). Here's the code and css:

<%@ 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>

And the 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;
}

score 1 · Answer 1 · answered Sep 23 '15 at 13:42

1

I've had this problem as well. The rad grid was always rendered with 300pxs - in an inline style, not even a css class. The solution I came up with is easier than anything suggested by telerik or found on the web. Just add this to the style tag of your page and you're done (might have to change from the class to the actual id of the grid but you get the gist):

div.rgDataDiv
{
    height:auto!important;
}

TaDa!

answered Sep 23 '15 at 13:42

Sergiu

432
6
18

This does not work with static headers, which OP is using. – fix Aug 04 '16 at 17:55

score 0 · Answer 2 · answered Aug 04 '16 at 17:54

I just ran into this problem and figured I'd share my javascript/jquery solution. I see you're using static headers, and that for me was breaking the horizontal scrolling after I resized the grid. This solution does not break horizontal scrolling with UseStaticHeaders=true and properly sizes the grid to 250px less than the window's height.

var mainGrid;
function GridCreated(sender, args){
    mainGrid = sender.GridDataDiv;
    mainGrid.style.height = $(window).height() - 250;
}
$(window).resize(function() {
    if (mainGrid != null && $(window).height() > 250) {
        mainGrid.style.height = $(window).height() - 250;
    }
)};

score 0 · Answer 3 · answered Oct 09 '11 at 18:06

0

Try this:

#inner-content
{
    position: relative;
    background-color: Olive;
    top: 50px;
    right: 0px;
    bottom: 0px;
    with: 100%;
    height: 100%;
    left: 0px;
}

And this:

<telerik:RadGrid Width="100%" Height="100%" ID="TestGrid" runat="server">

answered Oct 09 '11 at 18:06

Icarus

63,293
14
100
115

Thanks, Icarus. I tried your suggestion, and when I query the divs they seem to be sized correctly but the behavior is completely wrong. The Telerik-generated header and data div heights add up properly to the height of the overall grid div as well as #inner-content (its container) and yet visually it's as if the grid extends well below its container. As I resize the browser window smaller and the data is no longer visible, the overflow scroller should be visible, but it doesn't appear until over half the grid is hidden from view. Some internal scroller property I'm missing? – Sean Rich Oct 09 '11 at 21:40
@SeanRich I am not an expert on CSS but I something tells me that your issues are related to the `position:absolute` that you have on your container divs. Absolute positioning is mostly used for floating divs in conjunction with big z-index. I would try setting everything to position:relative or even remove all the `position` directives and use `padding` or `margin`. For example, instead of having `position:absolute; top: 50px;` you could remove `position` and simply have `margin-top:50px;` – Icarus Oct 09 '11 at 22:09
1

I've done some mods to the markup and the javascript and got something working, although I'm disappointed that I have to resort to javascript to get Telerik's controls to layout properly. Thanks again. – Sean Rich Oct 11 '11 at 12:22

Radgrid fill container height

3 Answers3