I have a webpage that has a Map (google), Chart, and Grid. They share the screen via Splitters and TabStrips. I am having an impossible time making them expand to 100% of height/width of the space that they have available to their <divs>
I have created a stripped down JsFiddle that shows the problem: http://jsfiddle.net/drysg/Rh7cL/ Full Browser version: http://jsfiddle.net/drysg/Rh7cL/embedded/result/
I have tried all sorts of CSS tricks (display layout, block, using height: 100%, width: 100%, explicit setting of all width/height in the hierarchy. But nothing is working. I simplified the CSS to illustrate.
I am looking for a pure CSS solution that:
1. Expands Grid, Chart, and Map to fill the screen at outset
2. Browser Resize will dynamically resize the Grid, Map, and Chart
(they will shrink to available space like any good WPF or Silverlight app!
3. If needed, I would tolerate a JQuery approach that responded to window resize events.
If you look closely you will see there are actually 4 issues:
1. The map height is not 100% of the needed space
2. The TabStrip that holds the Chart & Grid is not filling 100% of the height
2. There is a scrollbar on the TabStrip that holds the Chart
and Grid (I want that removed since they should be filling the space)
3. What I do want is the scrollbar of the Grid to be working (and that way I won't have a scrollbar on the TabStrip)
The layout hierarchy is as follows:
I. Top Window
1. Title DIV
2. Splitter
A. Map
B. TabStrip
i. Table DIV
a. Menu
b. Grid
ii. Chart
I have created a stripped down JsFiddle that shows the problem: http://jsfiddle.net/drysg/Rh7cL/ Full Browser version: http://jsfiddle.net/drysg/Rh7cL/embedded/result/
I have tried all sorts of CSS tricks (display layout, block, using height: 100%, width: 100%, explicit setting of all width/height in the hierarchy. But nothing is working. I simplified the CSS to illustrate.
I am looking for a pure CSS solution that:
1. Expands Grid, Chart, and Map to fill the screen at outset
2. Browser Resize will dynamically resize the Grid, Map, and Chart
(they will shrink to available space like any good WPF or Silverlight app!
3. If needed, I would tolerate a JQuery approach that responded to window resize events.
If you look closely you will see there are actually 4 issues:
1. The map height is not 100% of the needed space
2. The TabStrip that holds the Chart & Grid is not filling 100% of the height
2. There is a scrollbar on the TabStrip that holds the Chart
and Grid (I want that removed since they should be filling the space)
3. What I do want is the scrollbar of the Grid to be working (and that way I won't have a scrollbar on the TabStrip)
The layout hierarchy is as follows:
I. Top Window
1. Title DIV
2. Splitter
A. Map
B. TabStrip
i. Table DIV
a. Menu
b. Grid
ii. Chart
7 Answers, 1 is accepted
0
Hello Yechezkal,
The rule of thumb is that each element that has a percentage height (in your case - 100% height) requires its parent element to have an explicit height as well. This rule applies recursively until the <html> element is reached.
So please inspect all elements that you want to expand vertically and check their parents.
You will need some Javascript to resize the Grid's div.k-grid-content element on browser window resize, since this widget currently does not resize automatically vertically.
If you need further assistance, please submit a support ticket and we will address the specific issues that you are having.
Regards,
Dimo
the Telerik team
The rule of thumb is that each element that has a percentage height (in your case - 100% height) requires its parent element to have an explicit height as well. This rule applies recursively until the <html> element is reached.
So please inspect all elements that you want to expand vertically and check their parents.
You will need some Javascript to resize the Grid's div.k-grid-content element on browser window resize, since this widget currently does not resize automatically vertically.
If you need further assistance, please submit a support ticket and we will address the specific issues that you are having.
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!
0
Dr.YSG
Top achievements
Rank 2
Rank 2
answered on 18 Jun 2012, 05:19 PM
I went and made explicit the width, height, and margin for all containing <div>s back to <html> (I did indicate in my original note that I already tried that approach).
Google Maps is now doing the correct thing, but there are 4 issues with the Kendo Controls (in fact, this made some of them less well behaved).
So I am going to file a bug report, as you suggested.
The new issues are
1. The body has a scroll bar (even though it's contents (title, and splitWidget) add to 100% and there is no padding)
2. The TabStrip that holds the Chart & Grid has an un-needed scroll bar
2. There is a scrollbar on the TabStrip that holds the Chart and Grid (I want that removed since they should be filling the space)
3. The Chart widget is not 100% in width/height (even though it is told to do that).
The jsFiddle has been updated
Google Maps is now doing the correct thing, but there are 4 issues with the Kendo Controls (in fact, this made some of them less well behaved).
So I am going to file a bug report, as you suggested.
The new issues are
1. The body has a scroll bar (even though it's contents (title, and splitWidget) add to 100% and there is no padding)
2. The TabStrip that holds the Chart & Grid has an un-needed scroll bar
2. There is a scrollbar on the TabStrip that holds the Chart and Grid (I want that removed since they should be filling the space)
3. The Chart widget is not 100% in width/height (even though it is told to do that).
The jsFiddle has been updated
0
Faisal
Top achievements
Rank 1
Rank 1
answered on 20 Nov 2012, 02:47 PM
Hey @Dr.YSG
Thanks your fiddle has helped me. But there is one little problem in that which I have fixed. Here is the fixed code:
//======================================================================
var gridElement = $("#" + this.options.gridContainerName),
dataArea = gridElement.find(".k-grid-content"),
gridHeight = gridElement.innerHeight(),
otherElements = gridElement.children().not(".k-grid-content"),
otherElementsHeight = 0;
otherElements.each(function () {
var h = 0;
try {
h = parseInt($(this).outerHeight().height()); //This was'nt right in your fiddle code. It was displaying "[object object]" on console in output
} catch (e) { }
otherElementsHeight += h;
});
try {
gridHeight = parseInt(gridHeight);
} catch (e) { }
if (gridHeight > 0)
dataArea.css("height", gridHeight - otherElementsHeight);
console.log("gridHeight: " + gridHeight + ". otherElementsHeight: " + otherElementsHeight);
//======================================================================
Thanks your fiddle has helped me. But there is one little problem in that which I have fixed. Here is the fixed code:
//======================================================================
var gridElement = $("#" + this.options.gridContainerName),
dataArea = gridElement.find(".k-grid-content"),
gridHeight = gridElement.innerHeight(),
otherElements = gridElement.children().not(".k-grid-content"),
otherElementsHeight = 0;
otherElements.each(function () {
var h = 0;
try {
h = parseInt($(this).outerHeight().height()); //This was'nt right in your fiddle code. It was displaying "[object object]" on console in output
} catch (e) { }
otherElementsHeight += h;
});
try {
gridHeight = parseInt(gridHeight);
} catch (e) { }
if (gridHeight > 0)
dataArea.css("height", gridHeight - otherElementsHeight);
console.log("gridHeight: " + gridHeight + ". otherElementsHeight: " + otherElementsHeight);
//======================================================================
0
Dr.YSG
Top achievements
Rank 2
Rank 2
answered on 20 Nov 2012, 05:08 PM
I don't understand why you need all those parseInt()'s JQuery .outerHeight() returns a number for me. (and I have tested this in firefox, IE, and chrome). I also don't see the [object object] in my console.
I do appreciate someone taking the time, and posting extensive corrections like this. I am only trying to indicate that I am puzzled why you are adding the parseInts and why that helps.
I do appreciate someone taking the time, and posting extensive corrections like this. I am only trying to indicate that I am puzzled why you are adding the parseInts and why that helps.
0
Faisal
Top achievements
Rank 1
Rank 1
answered on 21 Nov 2012, 06:22 AM
@Dr.YSG
Grid height issue was occurring to Kendo grid in my Asp.Net MVC project after I updated to the latest 2012.3.1114 release of Kendo.
You can see the attached Firefox Console snapshot.
As far as using parseInt(), I used it because otherElementsHeight was coming as a float value and I wanted to turn it into an int value. But yes you are right, we do not need it necessarily here.
But the shown console output and hence the incorrect gridHeight value were certainly coming and I had then to use .height() to resolve this.
Please also note that grid used in my project was a little bit extension to the Kendo grid and in my init() function after following call:
kendo.ui.Grid.fn.init.call(this, element, this.options);
I was using your resizeGrid() function logic to resolve grid height issue. Also note that I haven't played with any grid HTML in my extended Kendo grid. I have just added logic by which we can specify Asp.Net MVC Controller name as one of its config options which then grid's dataSource uses for its transport read's url property value. Nothing else special I have done in that.
I hope you understand now.
Grid height issue was occurring to Kendo grid in my Asp.Net MVC project after I updated to the latest 2012.3.1114 release of Kendo.
You can see the attached Firefox Console snapshot.
As far as using parseInt(), I used it because otherElementsHeight was coming as a float value and I wanted to turn it into an int value. But yes you are right, we do not need it necessarily here.
But the shown console output and hence the incorrect gridHeight value were certainly coming and I had then to use .height() to resolve this.
Please also note that grid used in my project was a little bit extension to the Kendo grid and in my init() function after following call:
kendo.ui.Grid.fn.init.call(this, element, this.options);
I was using your resizeGrid() function logic to resolve grid height issue. Also note that I haven't played with any grid HTML in my extended Kendo grid. I have just added logic by which we can specify Asp.Net MVC Controller name as one of its config options which then grid's dataSource uses for its transport read's url property value. Nothing else special I have done in that.
I hope you understand now.
0
Dr.YSG
Top achievements
Rank 2
Rank 2
answered on 21 Nov 2012, 04:33 PM
I am also using: 2012.3.1114
and
$("#gridWidget").innerHeight()
returns a float. But I am not doing ASP MVC work. My server is a WCF JSON service which lets me avoid having IIS and lets me create a simple standalone web service for doing database calls.
I don't have a need (or time) this out, but maybe some other thread reader will find yours and my comments useful.
Thanks.
0
Faisal
Top achievements
Rank 1
Rank 1
answered on 22 Nov 2012, 05:38 AM
The new version of Kendo has many problems because of which I have reverted it to the old Feb 2012 version.
I am having problem with grid, its content area portion size, sometimes it overflows, pager's page size combo sometimes does not even work. On pages where I have used kendo grid along with its toolbar, they are behaving weird after the update.
I guess Telerik should better first make sure that the release is stable enough to gain the confidence of its customers and only then launch it to public.
I am having problem with grid, its content area portion size, sometimes it overflows, pager's page size combo sometimes does not even work. On pages where I have used kendo grid along with its toolbar, they are behaving weird after the update.
I guess Telerik should better first make sure that the release is stable enough to gain the confidence of its customers and only then launch it to public.