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

Grid height = 100% doesn't work with static headers

3 Answers 255 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Elad
Top achievements
Rank 1
Elad asked on 09 Apr 2014, 11:40 AM
Dear support,
My senario is a bit complicated,

I am using IE8 standard mode and telerik Q2 2013
I have a main page.
Inside the main page I have an Iframe that holds another page, let's call it sub page.
My sub page holds the grid inside absolute div.
My grid use static headers.
The Grid height is 100%
When First loading the page, the grid looks fine.
When I refresh the Iframe that holds this sub page (setting different src for the iframe), the grid fills the whole space but the data area has height 300px inline. (where class = rgDataDiv).

to simplify things:
<body>
<some header/>
<iframe>
<absolute div/>
<absolute div>
<rad grid height=100%/ with static headers>
</absolute div>
</iframe>
</body>

How do i solve this problem?
Thanks



3 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 09 Apr 2014, 12:44 PM
Hello Elad,

When scrolling with static headers are enabled the grid ScrollHeight is 300px by default. However, if you have set Height ="100%" for the grid it should expand according to its container height, except if the grid is placed in an invisible container or its container has not explicit height specified. Can you try setting height 100% with CSS to the absolute div that wraps the grid and see if it makes any difference?

Basically, when you set height 100% to an element you need to make sure that its parent element has an explicit height specified, otherwise the grid simply will not stretch to fulfill its container because the browser don't know what is the height of the parent. Having this in mind you can inspect your page in order to see which parent elements are without explicit height and set it accordingly.

Regards,
Pavlina
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Elad
Top achievements
Rank 1
answered on 09 Apr 2014, 02:01 PM
I tried your suggestion to add height=100% to the absolute div wrapper but no difference. after reload the iframe the grid's data height goes back to 300px.

I went up the DOM tree till the fixed height and all elements between has height 100%.
This is so strange to me,
Why the first time looks ok and after refreshing the iframe something goes wrong, it's the same page...?

0
Pavlina
Telerik team
answered on 10 Apr 2014, 08:59 PM
Hi Elad,

If the RadGrid parent resizes together with the browser window, then you should not encounter such problem. If the RadGrid parent is resized with Javascript, then after resizing it, you need to call the repaint() method of the RadGrid client object. Please try this out and let me know about the result.

Additionally, it the issue still persists, please send us a sample runnable project that we can debug locally, in order to advise you further.

Regards,
Pavlina
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Elad
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Elad
Top achievements
Rank 1
Share this question
or