How to use grid in CSS flexible box

9 posts, 1 answers
  1. Scott Waye
    Scott Waye avatar
    150 posts
    Member since:
    Nov 2009

    Posted 07 Mar Link to this post

    I want to use the grid in a CSS flex layout with nested flex containers.  However the grid expands the flex item and the scrollbars are therefore missing (IE11 latest):

     

    http://runner.telerik.io/fullscreen/iHugEV/16

    What's going wrong here?

  2. Stefan
    Admin
    Stefan avatar
    927 posts

    Posted 09 Mar Link to this post

    Hello Scott,
    In this scenario, I can suggest setting the height of the Grid using the height property of the Grid:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-height

    I modify the provide example to demonstrate this implementation:

    http://runner.telerik.io/fullscreen/iHugEV/19

    I hope this will help to achieve the desired result.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Scott Waye
    Scott Waye avatar
    150 posts
    Member since:
    Nov 2009

    Posted 09 Mar in reply to Stefan Link to this post

    Hi,

    Unfortunately still no good,  See attached screenshot:

  4. Stefan
    Admin
    Stefan avatar
    927 posts

    Posted 13 Mar Link to this post

    Hello Scott,

    Please advise what is the expected result in this scenario, as in the first example the Grid was not scrollable, but the one that was modified has a working scrollbar.

    Are two scrollbars expected on the page?

    Also, please have in mind that if due the the use of flex, the page scrollbar is not visible, this may not be directly related to the Grid.

    I will be expecting the additional information and I will assist further.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Scott Waye
    Scott Waye avatar
    150 posts
    Member since:
    Nov 2009

    Posted 13 Mar in reply to Stefan Link to this post

    HI Stefan,

    The expected result is to have a grid which fills the containing div but does not overflow.

    In the first example, scrollable is not set on the grid configuration, according to the docs the default is scrollable: true so I don't know what you mean by  "in the first example the Grid was not scrollable"?

    Regards the most recent post, your version, http://dojo.telerik.com/iHugEV/19 and the graphic I posted when you open the Dojo it looks fine.  I have my browser maximised so it opens maximised.  Now I un-maximise the browser window and you get the result in the graphic.  The vertical scroll bar is half shown even though the resize method is called.  I've highlighted that in the attached graphic.  So, as the grid resizes horizontally ok, I don't need a horizontal scrollbar, but if it was shown that would not be a problem.  I do need a working vertical scrollbar with both the top and bottom arrows visible.

     

    Thanks,

     

    Scott

     

  6. Scott Waye
    Scott Waye avatar
    150 posts
    Member since:
    Nov 2009

    Posted 13 Mar Link to this post

    And the graphic:
  7. Scott Waye
    Scott Waye avatar
    150 posts
    Member since:
    Nov 2009

    Posted 13 Mar Link to this post

    For some reaons I'm getting an error posting the graphic.  trying again
  8. Answer
    Stefan
    Admin
    Stefan avatar
    927 posts

    Posted 15 Mar Link to this post

    Hello Scott,

    Thank you for clarifying the scenario.

    After additional testing, I can confirm that this is currently a limitation, as the Grid does not officially support flex due to specifics in its rendering.

    I understand this is not the best result, but currently, if the window is minimised the scrollbar will not be fully visible.

    Apologies for the inconvenience this may cause you.

    ======================================

    Also, in my previous response, I mentioned that in the first example the Grid is not scrollable because the scrolling functionality was not working and I was not able to scroll it:

    http://runner.telerik.io/fullscreen/iHugEV/16

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Scott Waye
    Scott Waye avatar
    150 posts
    Member since:
    Nov 2009

    Posted 15 Mar in reply to Stefan Link to this post

    Thanks,  its difficult to know what CSS features the grid supports and which it doesn't.  I'll create a uservoice post to request support for for flex (and might as well add CSS grid while your at it :-) )
  10. Scott Waye
    Scott Waye avatar
    150 posts
    Member since:
    Nov 2009
Back to Top