Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
620
Splitter expand vertically and resize together with the browser window (100% height)
posted

I have an igsplitter, which has an iggrid as the left child and some html content as the right child.  I want the igsplitter to take the available browser height (and width).  As the browser is resized, the igspillter should resize to take the available space.  When the content does not fit on the browser's page, the vertical scrollbar should appear on the iggrid.

I've tried a number of things, but am I'm having problems hitting on the right solution. Below is what I have so far.  Any help you could give would be great.

<!DOCTYPE html>

<html>

<head>

<!-- Ignite UI Required Combined CSS Files -->

<link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />

<link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/structure/infragistics.css" rel="stylesheet" />

<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

<!-- Ignite UI Required Combined JavaScript Files -->

<script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.core.js"></script>

<script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.lob.js"></script>

<style>

html,

body {

height: 100%;

margin: 0;

padding: 0;

overflow: hidden;

}

#splitter{

height: 100%;

}

</style>

<script type="text/javascript">

var nwCustomersWithOrders = [

{ "ID": "ANTON1", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTON2", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTON3", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTON4", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTON5", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTON6", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTON7", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTON8", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTON9", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTON0", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONA", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONB", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONC", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTOND", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONE", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONF", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONG", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONH", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONI", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONJ", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONK", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONL", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONM", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONN", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONO", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONP", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONQ", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONR", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONS", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONT", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONU", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONV", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONW", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONX", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONY", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" },

{ "ID": "ANTONZ", "CompanyName": "Antonio Moreno Taquería", "ContactName": "Antonio Moreno", "ContactTitle": "Owner" }

];

</script>

</head>

<body>

<div id="splitter" style="height:100%;border:0;">

<div>

<table id="mainGrid"></table>

</div>

<div>

<label>Label:</label> Value<br />

<label>Label:</label> Value<br />

<label>Label:</label> Value<br />

<label>Label:</label> Value<br />

<label>Label:</label> Value<br />

<label>Label:</label> Value<br />

<label>Label:</label> Value<br />

<label>Label:</label> Value<br />

<label>Label:</label> Value<br />

<label>Label:</label> Value<br />

<label>Label:</label> Value<br />

<label>Label:</label> Value<br />

<label>Label:</label> Value<br />

<label>Label:</label> Value<br />

<label>Label:</label> Value<br />

<label>Label:</label> Value<br />

<label>Label:</label> Value<br />

<label>Label:</label> Value<br />

<label>Label:</label> Value<br />

<label>Label:</label> Value<br />

<label>Label:</label> Value<br />

</div>

</div>

<script>

$(function () {

$("#splitter").igSplitter({ height: "100%", orientation: "vertical", panels: [{ min: 250, collapsed: false, collapsible: false }, { min: 250, size: 350, collapsed: false, collapsible: false }] });

$("#mainGrid").igGrid({

width: "100%",

height: "100%",

autoGenerateColumns: false,

dataSource: nwCustomersWithOrders,

columns: [{

headerText: "ID",

key: "ID"

}, {

headerText: "Company Name",

key: "CompanyName"

}, {

headerText: "Contact Name",

key: "ContactName"

}, {

headerText: "Contact Title",

key: "ContactTitle"

}],

features: [{

name: "Selection",

mode: "row",

rowSelectionChanged: function (ui, args) {

}

}]

});

});

</script>

</body>

</html>

Parents Reply Children