Grid 100% height

19 posts, 0 answers
  1. Simon831
    Simon831 avatar
    36 posts
    Member since:
    Sep 2005

    Posted 20 Aug 2012 Link to this post

    I can get a Grid to be 100% high by setting parent containers to be 100% as well.

    But inside an MVC splitter pane this does not work and the grid seems to expand to 100% of the browser rather than the DIV of the splitter pane it is in.

    What methods are people using to get 100% height in all situations and browser resizes?
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 20 Aug 2012 Link to this post

    Hello Simon,

    Please take a look at the following demo. It uses pure Kendo UI widgets, but the logic with MVC wrappers is the same.

    http://jsfiddle.net/dimodi/MjKmJ/

    When the browser window is resized, the Splitter resize event is fired, so it is used to resize the Grid.

    If you need further assistance, please open a support ticket and send a runnable demo which shows your implementation.

    Kind regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Paul Seabury
    Paul Seabury avatar
    5 posts
    Member since:
    Dec 2009

    Posted 24 Oct 2012 Link to this post

    The Fiddle you posted was great for when a Grid was directly parented by a Splitter Pane, but what if we add a TabStrip to the equation?  I'd like the Grid to always fill whatever available space is in the Tabs of the bottom Splitter Pane in the JSFiddle example here.  Is this possible?  Any guidance is appreciated.

    Paul
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 24 Oct 2012 Link to this post

    Hello Paul,

    The rule of thumb is quite straight-forward:

    An element with a percentage height requires its parent to have an explicit height.

    http://www.w3.org/TR/CSS21/visudet.html#the-height-property

    This means that if the parent height is also set in percent, the rule applies recursively until an element with a pixel height is reached, or until the <html> element is reached.

    In your case the Grid and its parent have no height and cannot expand to fill the TabStrip wrapper.

    In addition, 100% high elements should not have siblings, borders, margins and paddings, otherwise content overflow will occur, or you will have unnecessary scrollbars. In your case the TabStrip's active content container (which is the Grid's parent) has a sibling - the tabs <ul> wrapper, which means you can't simply set a 100% height for it, but have to calculate and set a pixel height, e.g. in the Splitter's resize event.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Paul Seabury
    Paul Seabury avatar
    5 posts
    Member since:
    Dec 2009

    Posted 24 Oct 2012 Link to this post

    Is there a way that you would construct this series of controls/containers differently to simplify it or otherwise make it better?  I'm simply using the Kendo demo code to mockup a container heirarchy that I want to have, namely:

    Splitter
    +Top
    ++TopLeft
    ++TopRight
    +Bottom
    ++Tabs
    +++Tab1
    ++++Grid1
    +++Tab2
    ++++Grid2
    +++TabN
    ++++GridN

    Where the grid fills the entire tab area no matter how many items it may have in it.  I'm certainly no expert yet at html/css, but it seems there must be an easier way than manually computing the size of one or more elements when the splitter is resized.
  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 25 Oct 2012 Link to this post

    Hello Paul,

    Unfortunately there is no easier way, because current web standards do not provide means to define a

    "take up 100% height minus the height of all sibligns"

    height style. You need Javasctript to achieve this.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Gary
    Gary avatar
    28 posts
    Member since:
    Apr 2011

    Posted 02 Dec 2012 Link to this post

    Scrub this request. was a proxy issue

    Dimo,

    Would like to see the re-size logic of re-sizing the grid on splitter resize but jsfiddle link is not functioning.

    can you re-post?

    Thanks
  9. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 03 Dec 2012 Link to this post

    Hello Gary,

    In case you are talking about this fiddle, it works:

    http://jsfiddle.net/dimodi/MjKmJ/

    function resizeGrid() {
        var gridElement = $("#grid"),
            dataArea = gridElement.find(".k-grid-content"),
            gridHeight = gridElement.innerHeight(),
            otherElements = gridElement.children().not(".k-grid-content"),
            otherElementsHeight = 0;
        otherElements.each(function(){
            otherElementsHeight += $(this).outerHeight();
        });
        dataArea.height(gridHeight - otherElementsHeight);
    }
     
    $("#splitter").kendoSplitter({
        resize: function() {window.setTimeout(function(){resizeGrid();}, 1);}
    });


    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Gary
    Gary avatar
    28 posts
    Member since:
    Apr 2011

    Posted 03 Dec 2012 Link to this post

    Yes, it does! Sorry, proxy issue stopped the page loading.

    I have been trying to generalise the function for non-grid elements but TabStrips are proving tricky.

    Like Paul I have a TabStrip within a Pane, with a Grid on it. Emulating an MDI application.

    Do you have any examples of resizing so that the Tabs and Grid are always 100% of the Pane Height?

    I will struggle on while I wait for your reply.

    Gary
  11. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 04 Dec 2012 Link to this post

    Hi Gary,

    This is an old example, I suppose it will throw enough light on the mattter.

    http://jsfiddle.net/dimodi/8etzB/

    The trickiness of the TabStrip resizing lies in the fact that this widget includes two sibling elements - the tab container and the content container. This prevents you from being able to set 100% height to the content <div>s, so you need to calculate their height and set it in pixels. Currently supported web standards and CSS do not provide the ability to define an "occupy all remaining vertical space" style.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Nathan
    Nathan avatar
    24 posts
    Member since:
    Sep 2009

    Posted 18 Apr 2013 Link to this post

    Hi,

    I'm so close to having this same issue sorted out but am missing something. I've sorted through some of the other posts on this topic and this one seems closest to mine. Sorry for the long winded post!

    Here's my scenario:
    Splitter with 2 panes (left and right)
    Left pane has a grid
    Right pane has a tab control with each tab having a grid.

    What I've done:
    In splitter resize events, I call a resizeGrid method which resizes the tab panes first and then the grids using "borrowed" code from the other posts I've found.
    This "almost" works, but one extra row shows below the line of the grid. See the image1 attachment for an example. The odd thing is that if I check one of the boxes (which fires a save to the server and update to the grid data source) then it suddenly fixes itself. See image2 to see the updated UI. Note that I call the same resize function in the dataBound event. Anyone know what's going on here? Seems like it may be an issue with order of events and/or the fact that I'm calling this resize function from a lot of places...

    Any help would be appreciated!

    Here's the resize function:
    function resizeGrid() {
        expandContentDivs(tabStripElement.children(".k-content"));
     
        var gridElement = $("#facilitygrid");
        var dataArea = gridElement.find(".k-grid-content");
        var newHeight = gridElement.parent().innerHeight() - 10;
        var diff = gridElement.innerHeight() - dataArea.innerHeight();
     
        var otherElements = gridElement.children().not(".k-grid-content");
        var otherElementsHeight = 0;
        otherElements.each(function () {
            otherElementsHeight += $(this).outerHeight();
        });
     
        gridElement.height(newHeight);
        dataArea.height(newHeight - diff - otherElementsHeight);
     
        gridElement = $("#departmentsgrid");
        dataArea = gridElement.find(".k-grid-content");
        newHeight = gridElement.parent().innerHeight() - 10;
        diff = gridElement.innerHeight() - dataArea.innerHeight();
         
        otherElements = gridElement.children().not(".k-grid-content");
        otherElementsHeight = 0;
        otherElements.each(function () {
            otherElementsHeight += $(this).outerHeight();
        });
        // end test
        gridElement.height(newHeight);
        dataArea.height(newHeight - diff - otherElementsHeight);
     
        gridElement = $("#deptgroupsgrid");
        dataArea = gridElement.find(".k-grid-content");
        newHeight = gridElement.parent().innerHeight() - 10;
        diff = gridElement.innerHeight() - dataArea.innerHeight();
         
        otherElements = gridElement.children().not(".k-grid-content");
        otherElementsHeight = 0;
        otherElements.each(function () {
            otherElementsHeight += $(this).outerHeight();
        });
         
        gridElement.height(newHeight);
        dataArea.height(newHeight - diff - otherElementsHeight);
     
    }

    And for completeness here's the code for the tab strip resize:
        var tabStripElement = $("#tabstrip").kendoTabStrip(),
    tabStrip = tabStripElement.data("kendoTabStrip");
        var expandContentDivs = function (divs) {
            divs.height(tabStripElement.innerHeight() - tabStripElement.children(".k-tabstrip-items").outerHeight() - 16);
        }

  13. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 19 Apr 2013 Link to this post

    Hi Nathan,

    The problem shown on image1.png occurs when the Grid is initialized (dataBound) while it is hidden. In such cases Javascript size calculations don't work. Please adjust the Grid height only while the widget is visible (i.e. in an active TabStrip tab or in a Splitter, which has already been intiialized and with an adjusted layout).

    The events that you can use are:

    Splitter layoutChange

    TabStrip activate

    All the best,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Nathan
    Nathan avatar
    24 posts
    Member since:
    Sep 2009

    Posted 19 Apr 2013 Link to this post

    Thanks for the response Dimo, but unfortunately I'm already calling the resize function from tabstrip activate too.  Is there a possibility that I need to stop resizing under certain conditions? My fear is that I'm calling this resize function too much now. Here are all the places I call that resize function:
    Splitter.contentLoad
    Splitter.resize
    Grid.dataBound
    TabStrip.activate

    Thanks!

    Nathan
  15. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 19 Apr 2013 Link to this post

    Hello Nathan,

    Please use Splitter.layoutChange instead of Splitter.resize. layoutChange is called at a later stage and is better to be used.

    You don't need to adjust the Grid height in Grid.dataBound.

    It is important to note that you should only resize the Grids, which are currently visible.


    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  16. Nathan
    Nathan avatar
    24 posts
    Member since:
    Sep 2009

    Posted 19 Apr 2013 Link to this post

    Ok thanks I'm getting much closer using layout changed. I still have one problem which is that I can't seem to get the activate event (or any event in fact) to fire on the TabStrip.
    Here's a simple fiddle showing the behavior. I've tried doing this a few different ways and feel very stupid right now that I can't get this to work... what am I missing?

    http://jsfiddle.net/XjYc8/

    Thanks!

    Nathan
  17. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 22 Apr 2013 Link to this post

    Hi Nathan,

    The Kendo UI version and the jQuery version in the provided example are not compatible. As a result, the event handler is not executed. In addition, the CSS and JS files are from different Kendo UI versions.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  18. Nathan
    Nathan avatar
    24 posts
    Member since:
    Sep 2009

    Posted 22 Apr 2013 Link to this post

    Sorry for the bad fiddle example - I am new to that tool. However, my actual project has all of the latest references for CSS, jQuery, and Kendo. I have updated the fiddle to match my project (2013 Q1) and I'm still having problems with the event.

    http://jsfiddle.net/XjYc8/3/

    Can you look a bit closer?

    Thanks
  19. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 22 Apr 2013 Link to this post

    Hello Nathan,

     
    In my previous reply I forgot to mention that the TabStrip is missing its content <div>s. I suppose you are not using it like this in your real application? Please check our online demos.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  20. Nathan
    Nathan avatar
    24 posts
    Member since:
    Sep 2009

    Posted 22 Apr 2013 Link to this post

    Yes in my production application I have a div for the tab and then another div within that for the grid on each tab. Adding those placeholders to my fiddle fixes it yet I still cant' seem to get this event to fire in my production app. I have verified all css and script references - anything else I can look at?

    In any event I'll just keep bashing away at it - I'm sure it's just something stupid. Thanks for all of your help!

    Nathan
Back to Top
UI for ASP.NET MVC is VS 2017 Ready