Grid height not measuring as expected inside flexbox

4 posts, 0 answers
  1. Marlon
    Marlon avatar
    16 posts
    Member since:
    Jul 2013

    Posted 11 Aug 2015 Link to this post

    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?

     

  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 13 Aug 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Marlon
    Marlon avatar
    16 posts
    Member since:
    Jul 2013

    Posted 13 Aug 2015 in reply to Pavlina Link to this post

    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  

  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 17 Aug 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready