nested layouts (grid inside border)

116 views
Skip to first unread message

RichTWebGuy

unread,
Jul 14, 2011, 11:43:18 AM7/14/11
to jLayout
Below is a simple example of a grid inside the 'south' component of a
border layout. I want to use flexgrid because I want different width
columns. When I use grid, it looks OK. When I use flexgrid, the
south component height collapses, so only the top of the grid is
visible. Any ideas appreciated.

===============================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jLayout Examples</title>
<meta http-equiv="Content-Type" content="text/xhtml;
charset=utf-8" />
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/jquery.metadata.js"></
script>
<script type="text/javascript" src="lib/jquery.sizes.js"></script>
<script type="text/javascript" src="jlayout.border.js"></script>
<script type="text/javascript" src="jlayout.grid.js"></script>
<script type="text/javascript" src="jlayout.flexgrid.js"></script>
<script type="text/javascript" src="jlayout.flow.js"></script>
<script type="text/javascript" src="jquery.jlayout.js"></script>

<style>
.border { overflow: auto; }
.nested { overflow: auto; }
.c {
background-color: rgb(220,220,220);
border: 1px solid rgb(200,200,200);
width: 100px;
display: inline-block;
}

</style>

<script type="text/javascript">
jQuery(function($)
{
$('div.nested').layout();
$('.border').layout();
});
</script>

</head>
<body>
<div class="border {layout: {type: 'border', hgap: 1, vgap: 1}}">
<div class="c east">sidebar</div>
<div class="c west ">content content content</div>
<div class="c south">
<div class="nested {layout: {type: 'flexGrid', rows:
1}}"><div>Part1</div><div>Part2 Part2 Part2 Part2 Part2 Part2 end</
div></div>
</div>
</div>
<br>
<div class="border {layout: {type: 'border', hgap: 1, vgap: 1}}">
<div class="c east">sidebar</div>
<div class="c west ">content content content</div>
<div class="c south">
<div class="nested {layout: {type: 'grid', rows:
1}}"><div>Part1</div><div>Part2 Part2 Part2 Part2 Part2 Part2 end</
div></div>
</div>
</div>
<br>
</body>
</html>

RichTWebGuy

unread,
Jul 17, 2011, 2:47:57 PM7/17/11
to jLayout
Bram, is this the same problem as post "Problem with flexGrid in a
border layout"

RichTWebGuy

unread,
Jul 17, 2011, 3:08:22 PM7/17/11
to jLayout
Actually, now it looks like the January 03, 2011 version of
jlayout.flexgrid.js fixed it.
Reply all
Reply to author
Forward
0 new messages