Map-Layout-Issue

Google Maps and Kendo Widgets don't fill the browser window. Need CSS or JQuery to do this?

by drysg

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Layout Testing</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js" type="text/javascript"></script>
    <script type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCqieFVYMm54A7Oj49uxaCs9XI6SruEI0g&amp;sensor=false"></script>
    <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" rel="stylesheet" type="text/css">
    <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.black.min.css" rel="stylesheet" type="text/css">
    <link href="Layout.css" rel="stylesheet" type="text/css">
    <script src="Layout.js" type="text/javascript"></script>
</head>
<body>
<div id="TitleText">Layout Testing</div>
<div id="splitWindow">
    <div id="mapPane"></div>
    <div id="tabPane">
        <ul>
            <li class="k-state-active">Table</li>
            <li>Chart</li>
        </ul>
        <div id="tablePane">

            <div id="tableMenu">
                <ul id="gridMenu" style="background-color: #2B5E84;">
                    <li>Table Operations
                        <ul>
                            <li id="TableCollapse">Collapse All</li>
                            <li id="TableExpand">Expand All</li>
                        </ul>
                    </li>
                    <li id="TableNoSelections">Remove Selections</li>
                    <li id="TableColumnChoice">Choose Columns</li>
                </ul>
            </div>
            <div id="gridWidget"></div>
        </div>
        <div id="chartPane">
            <div id="chartWidget"></div>
        </div>
        <div id="exportPane">
            <div id="exportWidget"></div>
        </div>
    </div>
</div>
</body>
</html>

CSS

html {
    height: 100%;
}

body {
    background-color: #3da7fd;
    font-family: Tahoma, sans-serif;
    height: 97%;
    margin: 6px;
    padding: 0px;
    border: 0px;
}

#banner {
    height: 2%;
    margin: 0%;
}

#splitWindow {
    height: 98%;
}

#mapPane {
    width: 100%;
    height: 100%;
}

#tabPane {
    height: 100%;
}

/*#chartPane {
    height: 100%;
}

#chartWidget {
    height: 100%;
}*/

JavaScript

var SampleData;

$(function () {
    "use strict";
    setup();
});

function setup() {
    getData();
    layout();
    mapSetup();
}

function getData() {
    SampleData = new kendo.data.DataSource({
        type:"odata",
        pageSize: 50,
        transport:{
            read:"http://demos.kendoui.com/service/Northwind.svc/Products"
        }
    });
}

function tabSelect(e) {
    if ($(e.contentElement).children("#chartWidget").length) {
        window.setTimeout(function () {
            buildChart();
        }, 800);
    }
}

function layout() {
    buildMenu();
    buildGrid();
    buildChart();
    $("#tabPane").kendoTabStrip({select:tabSelect});
    $("#splitWindow").kendoSplitter({
        orientation:"horizontal",
        panes:[
            { size:"50%", scrollable:false},
            { size:"50%", scrollable:false}
        ]
    });
}

function buildMenu() {
    $("#gridMenu").kendoMenu({
    });
}

function buildGrid() {
    "use strict";
    $("#gridWidget").kendoGrid({
        dataSource:SampleData,
        pageable: true,
        dataBound: resizeGrid,
        columns:[
            "ProductID",
            "ProductName",
            "QuantityPerUnit",
            "UnitsInStock",
            "UnitsOnOrder"
        ]
    });
}

function buildChart() {
    $("#chartWidget").kendoChart({
        title:{
            text:"Units In Stock"
        },
        dataSource:SampleData,
        series:[
            {
                name:"Units In Stock",
                field:"UnitsInStock"
            }
        ],
        categoryAxis:{
            field:"ProductName",
            labels:{rotation:90}
        }
    });
}

function resizeGrid() {
    var gridElement = $("#gridWidget"),
        dataArea = gridElement.find(".k-grid-content"),
        gridHeight = gridElement.innerHeight(),
        otherElements = gridElement.children().not(".k-grid-content"),
        otherElementsHeight = 0;
    otherElements.each(function(){
        otherElementsHeight +=...