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

Grid 100% height

18 Answers 2432 Views

Grid

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

18 Answers, 1 is accepted

answered on 24 Oct 2012, 04:01 PM

Hello Paul,

The rule of thumb is quite straight-forward:

An element with a percentage height requires its parent to have an explicit height.

http://www.w3.org/TR/CSS21/visudet.html#the-height-property

This means that if the parent height is also set in percent, the rule applies recursively until an element with a pixel height is reached, or until the <html> element is reached.

In your case the Grid and its parent have no height and cannot expand to fill the TabStrip wrapper.

In addition, 100% high elements should not have siblings, borders, margins and paddings, otherwise content overflow will occur, or you will have unnecessary scrollbars. In your case the TabStrip's active content container (which is the Grid's parent) has a sibling - the tabs <ul> wrapper, which means you can't simply set a 100% height for it, but have to calculate and set a pixel height, e.g. in the Splitter's resize event.

Regards,
Dimo
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 03 Dec 2012, 01:55 PM

Hello Gary,

In case you are talking about this fiddle, it works:

http://jsfiddle.net/dimodi/MjKmJ/

function resizeGrid() {

var gridElement = $("#grid"),

dataArea = gridElement.find(".k-grid-content"),

gridHeight = gridElement.innerHeight(),

otherElements = gridElement.children().not(".k-grid-content"),

otherElementsHeight = 0;

otherElements.each(function(){

otherElementsHeight += $(this).outerHeight();

});

dataArea.height(gridHeight - otherElementsHeight);

}

$("#splitter").kendoSplitter({

resize: function() {window.setTimeout(function(){resizeGrid();}, 1);}

});

Greetings,
Dimo
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 04 Dec 2012, 08:09 AM

Hi Gary,

This is an old example, I suppose it will throw enough light on the mattter.

http://jsfiddle.net/dimodi/8etzB/

The trickiness of the TabStrip resizing lies in the fact that this widget includes two sibling elements - the tab container and the content container. This prevents you from being able to set 100% height to the content <div>s, so you need to calculate their height and set it in pixels. Currently supported web standards and CSS do not provide the ability to define an "occupy all remaining vertical space" style.

Regards,
Dimo
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 18 Apr 2013, 05:55 PM

image1.png

image2.png

Hi,

I'm so close to having this same issue sorted out but am missing something. I've sorted through some of the other posts on this topic and this one seems closest to mine. Sorry for the long winded post!

Here's my scenario:
Splitter with 2 panes (left and right)
Left pane has a grid
Right pane has a tab control with each tab having a grid.

What I've done:
In splitter resize events, I call a resizeGrid method which resizes the tab panes first and then the grids using "borrowed" code from the other posts I've found.
This "almost" works, but one extra row shows below the line of the grid. See the image1 attachment for an example. The odd thing is that if I check one of the boxes (which fires a save to the server and update to the grid data source) then it suddenly fixes itself. See image2 to see the updated UI. Note that I call the same resize function in the dataBound event. Anyone know what's going on here? Seems like it may be an issue with order of events and/or the fact that I'm calling this resize function from a lot of places...

Any help would be appreciated!

Here's the resize function:

function resizeGrid() {

expandContentDivs(tabStripElement.children(".k-content"));

var gridElement = $("#facilitygrid");

var dataArea = gridElement.find(".k-grid-content");

var newHeight = gridElement.parent().innerHeight() - 10;

var diff = gridElement.innerHeight() - dataArea.innerHeight();

var otherElements = gridElement.children().not(".k-grid-content");

var otherElementsHeight = 0;

otherElements.each(function () {

otherElementsHeight += $(this).outerHeight();

});

gridElement.height(newHeight);

dataArea.height(newHeight - diff - otherElementsHeight);

gridElement = $("#departmentsgrid");

dataArea = gridElement.find(".k-grid-content");

newHeight = gridElement.parent().innerHeight() - 10;

diff = gridElement.innerHeight() - dataArea.innerHeight();

otherElements = gridElement.children().not(".k-grid-content");

otherElementsHeight = 0;

otherElements.each(function () {

otherElementsHeight += $(this).outerHeight();

});

// end test

gridElement.height(newHeight);

dataArea.height(newHeight - diff - otherElementsHeight);

gridElement = $("#deptgroupsgrid");

dataArea = gridElement.find(".k-grid-content");

newHeight = gridElement.parent().innerHeight() - 10;

diff = gridElement.innerHeight() - dataArea.innerHeight();

otherElements = gridElement.children().not(".k-grid-content");

otherElementsHeight = 0;

otherElements.each(function () {

otherElementsHeight += $(this).outerHeight();

});

gridElement.height(newHeight);

dataArea.height(newHeight - diff - otherElementsHeight);

}

And for completeness here's the code for the tab strip resize:

var tabStripElement = $("#tabstrip").kendoTabStrip(),

tabStrip = tabStripElement.data("kendoTabStrip");

var expandContentDivs = function (divs) {

divs.height(tabStripElement.innerHeight() - tabStripElement.children(".k-tabstrip-items").outerHeight() - 16);