Unable to size grid created from HTML table

2 posts, 0 answers
  1. B Jones
    B Jones avatar
    14 posts
    Member since:
    Jun 2010

    Posted 18 Jul 2018 Link to this post

    I have an HTML table that I'm creating a grid from, but I'm not able to change the height. The grid is within a splitter and the splitter pane has a div before the grid but I don't think this is causing the problem. Even without the splitter, I'm not able to size the grid to fill the window.






    Resize and Expand the Kendo UI Grid to 100% Height

    Expand Grids to Match the Height of TabStrip Containers within Splitter Panes

  2. Marin Bratanov
    Marin Bratanov avatar
    5704 posts

    Posted 19 Jul 2018 Link to this post


    Having an element with 100% height means that it must not have sibling nodes, as their total height goes above 100%.

    With this in mind, it will be easier to let the splitter take care of resizing the container where the grid is, so you can avoid the extra math and just .resize() the grid.

    It is also important to note that you need enough data in the grid for the container to get filled up.

    That said, here are two examples:

    In both examples I intentionally left an extra div with yellow background that wraps the grid so you can know that if you see it, the grid is not 100% tall, and also - to showcase how all elements in the tree must have 100% height or pixel height (as the splitter pane) for this to work out. You can remove this div later, it is here to showcase and for testing.

    Marin Bratanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top