Widgets that fill the Browser

8 posts, 0 answers
  1. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 15 Jun 2012 Link to this post

    I have a webpage that has a Map (google), Chart, and Grid. They share the screen via Splitters and TabStrips. I am having an impossible time making them expand to 100% of height/width of the space that they have available to their <divs>

    I have created a stripped down JsFiddle that shows the problem: http://jsfiddle.net/drysg/Rh7cL/ Full Browser version: http://jsfiddle.net/drysg/Rh7cL/embedded/result/

    I have tried all sorts of CSS tricks (display layout, block, using height: 100%, width: 100%, explicit setting of all width/height in the hierarchy. But nothing is working. I simplified the CSS to illustrate.

    I am looking for a pure CSS solution that:

    1. Expands Grid, Chart, and Map to fill the screen at outset
    2. Browser Resize will dynamically resize the Grid, Map, and Chart
        (they will shrink to available space like any good WPF or Silverlight app!
    3. If needed, I would tolerate a JQuery approach that responded to window resize events.

    If you look closely you will see there are actually 4 issues:

    1. The map height is not 100% of the needed space
    2. The TabStrip that holds the Chart & Grid is not filling 100% of the height
    2. There is a scrollbar on the TabStrip that holds the Chart
         and Grid (I want that removed since they should be filling the space)
    3. What I do want is the scrollbar of the Grid to be working (and that way I won't have a scrollbar on the TabStrip)

    The layout hierarchy is as follows:

    I. Top Window
        1. Title DIV
        2. Splitter
            A. Map
            B. TabStrip
                i. Table DIV
                    a. Menu
                    b. Grid
                ii. Chart
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 18 Jun 2012 Link to this post

    Hello Yechezkal,

    The rule of thumb is that each element that has a percentage height (in your case - 100% height) requires its parent element to have an explicit height as well. This rule applies recursively until the <html> element is reached.

    So please inspect all elements that you want to expand vertically and check their parents.

    You will need some Javascript to resize the Grid's div.k-grid-content element on browser window resize, since this widget currently does not resize automatically vertically.

    If you need further assistance, please submit a support ticket and we will address the specific issues that you are having.

    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. Kendo UI is VS 2017 Ready
  4. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 18 Jun 2012 Link to this post

    I went and made explicit the width, height, and margin for all containing <div>s back to <html> (I did indicate in my original note that I already tried that approach).

    Google Maps is now doing the correct thing, but there are 4 issues with the Kendo Controls (in fact, this made some of them less well behaved).

    So I am going to file a bug report, as you suggested.

    The new issues are

    1. The body has a scroll bar (even though it's contents (title, and splitWidget) add to 100% and there is no padding)
    2. The TabStrip that holds the Chart & Grid has an un-needed scroll bar
    2. There is a scrollbar on the TabStrip that holds the Chart and Grid (I want that removed since they should be filling the space)
    3. The Chart widget is not 100% in width/height (even though it is told to do that).

    The jsFiddle has been updated
  5. Faisal
    Faisal avatar
    9 posts
    Member since:
    Aug 2012

    Posted 20 Nov 2012 Link to this post

    Hey @Dr.YSG
    Thanks your fiddle has helped me. But there is one little problem in that which I have fixed. Here is the fixed code:

    //======================================================================
    var gridElement = $("#" + this.options.gridContainerName),
                dataArea = gridElement.find(".k-grid-content"),
                gridHeight = gridElement.innerHeight(),
                otherElements = gridElement.children().not(".k-grid-content"),
                otherElementsHeight = 0;

            otherElements.each(function () {
                var h = 0;
                try {
                    h = parseInt($(this).outerHeight().height()); //This was'nt right in your fiddle code. It was displaying "[object object]" on console in output
                } catch (e) { }

                otherElementsHeight += h;
            });

            try {
                gridHeight = parseInt(gridHeight);
            } catch (e) { }

            if (gridHeight > 0)
                dataArea.css("height", gridHeight - otherElementsHeight);
            console.log("gridHeight: " + gridHeight + ".  otherElementsHeight: " + otherElementsHeight);

    //======================================================================
  6. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 20 Nov 2012 Link to this post

    I don't understand why you need all those parseInt()'s JQuery .outerHeight() returns a number for me. (and I have tested this in firefox, IE, and chrome). I also don't see the [object object] in my console.

    I do appreciate someone taking the time, and posting extensive corrections like this. I am only trying to indicate that I am puzzled why you are adding the parseInts and why that helps.

  7. Faisal
    Faisal avatar
    9 posts
    Member since:
    Aug 2012

    Posted 21 Nov 2012 Link to this post

    @Dr.YSG

    Grid height issue was occurring to Kendo grid in my Asp.Net MVC project after I updated to the latest 2012.3.1114 release of Kendo.
    You can see the attached Firefox Console snapshot.
    As far as using parseInt(), I used it because otherElementsHeight  was coming as a float value and I wanted to turn it into an int value. But yes you are right, we do not need it necessarily here.
    But the shown console output and hence the incorrect gridHeight value were certainly coming and I had then to use .height()  to resolve this.
    Please also note that grid used in my project was a little bit extension to the Kendo grid and in my init() function after following call:
           kendo.ui.Grid.fn.init.call(this, element, this.options);
    I was using your resizeGrid() function logic to resolve grid height issue. Also note that I haven't played with any grid HTML in my extended Kendo grid. I have just added logic by which we can specify Asp.Net MVC Controller name as one of its config options which then grid's dataSource uses for its transport read's url property value. Nothing else special I have done in that.

    I hope you understand now.
  8. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 21 Nov 2012 Link to this post


    I am also using: 2012.3.1114

    and

    $("#gridWidget").innerHeight()

    returns a float. But I am not doing ASP MVC work. My server is a WCF JSON service which lets me avoid having IIS and lets me create a simple standalone web service for doing database calls.

    I don't have a need (or time) this out, but maybe some other thread reader will find yours and my comments useful.

    Thanks.
  9. Faisal
    Faisal avatar
    9 posts
    Member since:
    Aug 2012

    Posted 21 Nov 2012 Link to this post

    The new version of Kendo has many problems because of which I have reverted it to the old Feb 2012 version.
    I am having problem with grid, its content area portion size, sometimes it overflows, pager's page size combo sometimes does not even work. On pages where I have used kendo grid along with its toolbar, they are behaving weird after the update.
    I guess Telerik should better first make sure that the release is stable enough to gain the confidence of its customers and only then launch it to public.
Back to Top
Kendo UI is VS 2017 Ready