This is a migrated thread and some comments may be shown as answers.

Problem With Grid Sizing

1 Answer 54 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Elliot asked on 04 Jan 2013, 08:25 PM
I have a grid that I am attempting to size based on the div size that contains it.  I am using the following code:
function resizeGrid(h) {
        var gridElement = $("#grid"),
            dataArea = gridElement.find(".k-grid-content"),
            gridHeight = h,
            otherElements = gridElement.children().not(".k-grid-content"),
            otherElementsHeight = 0;
        otherElements.each(function () {
            otherElementsHeight += $(this).outerHeight();
        dataArea.height(gridHeight - otherElementsHeight);
It is based on a fiddle that Dimo posted in another thread.  The h parameter is the height of the div that contains the grid.

The problem is that when the page is first loaded the grid causes a scrollbar to appear.  If I then resize the browser or maximize the grid appears as it should.  How can I get it set to the correct height on first load?

I have attached two images one showing the grid as it appears on load and one after any resize or maximze etc...

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 08 Jan 2013, 09:10 AM
Hello Elliot,

The problem may be caused by the following:

1. The Grid sizing logic may be executed too early. You can try wrapping it in a setTimeout

2. Based on the screenshots, it seems that there is some div padding or Grid margin applied (there is empty space between the Grid and the div). If this is the case, you need to adjust the calculations.

Here is the original example, which works correctly. You can compare it with your scenario.

All the best,
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question