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

Grid height not measuring as expected inside flexbox

3 Answers 621 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Marlon
Top achievements
Rank 1
Marlon asked on 11 Aug 2015, 11:48 PM

Example: http://dojo.telerik.com/@mharrison/erULo/4 

 

I'm not sure what I'm doing wrong here. I have a flexbox-based grid of 'modules' one of which will use a kendo grid. In my app, the grid's height does not seem to measure as I'd expect. I'd like to use the mobile scroller this will ultimately be wrapped into a cordova app. When I set mobile:"phone" the grid takes over the entire width and is positioned absolutely and I couldn't override any styles for km-pane or km-view to avoid it.

 

I'd just like the grid's height to fill the available height for the 'module' and be scrollable within those measure bounds without any sort of js. Is it possible?

 

3 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 13 Aug 2015, 05:15 PM
Hi,

The example below shows how to resize the Grid with flexbox. Check it out and see if this is what you are trying to achieve:
http://dojo.telerik.com/ogEbe/4

Regards,
Pavlina
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
1
Marlon
Top achievements
Rank 1
answered on 13 Aug 2015, 09:28 PM

Thank you for the reply but this is not what I was looking for. I want the grid to be a child contained within a flexbox container and respect the parent's height. I have a view with 4 children modules that should all be equally spaced/sized. When I add a grid to any of them, the grid pushes the height of its parent module out and they're no longer equal.  How do I make the grid contain itself? This seems like a step back. I don't need the height to be 100% if its a flexbox do I? I thought the idea was that it fills height if the set to stretch

 

Dojo Link based on your changes  

0
Pavlina
Telerik team
answered on 17 Aug 2015, 06:42 PM
Hello,

I will need some additional time to review and modify the provided example. However, in my opinion, this is not an ideal approach, due to the way flexbox works. For example, the pager height changes when the browser window is resized, and so does the empty space above the Grid's vertical scrollbar. Frozen columns cannot be used.

With the latest Kendo UI version, it is enough to set a height to the Grid wrapper and call the Grid's resize() API method and the grid height will measure as expected:

http://jsfiddle.net/qk4rLawb/

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