I'm having a bit of trouble with adding nested layouts by ID and not class. Most of the following code is ripped directly from examples.html
Given the following CSS:
.grid, .flex-grid, .column, .border, .mpb, .nested-center, .nested, .code, .horizontal, .vertical {
overflow: auto;
}
.nested-center {
display: inline-block;
}
.panel {
background-color: rgb(220,220,220);
border: 1px solid rgb(200,200,200);
text-align: center;
width: 100px;
height: 100px;
display: inline-block;
}
and the following HTML:
<div id="5135317c2b31a" style="width:600px;height:400px" class="nested">
<div id="5135317c3fa57" class="nested-center center">
<div id="5135317c4280d" class="panel"></div>
<div id="5135317c46782" class="panel"></div>
<div id="5135317c4a6b8" class="panel"></div>
<div id="5135317c4e5e6" class="panel"></div>
</div>
<div id="5135317c2eabd" class="east panel"></div>
<div id="5135317c32ed2" class="west panel"></div>
<div id="5135317c372d9" class="north panel"></div>
<div id="5135317c3b6ff" class="south panel"></div>
</div>
And the following javascript:
$('#5135317c3fa57').layout({
"mode" : "grid",
"columns" : 2,
"rows" : 2,
"hgap" : 3,
"vgap" : 3,
});
$('#5135317c2b31a').layout({
"mode" : "border",
"resize" : false,
"hgap" : 3,
"vgap" : 3,
});
I get unexpected results in Chrome, namely the border layout is off to one side and not surrounding the grid. However, using the following javascript(from the example), the outer layout will correctly wrap outside of the grid.
$('.nested-center').layout({
"type": "grid",
"columns": 2,
"rows": 2,
"hgap": 3,
"vgap": 3
});
$('.nested').layout({
"type": "border",
"resize": false,
"hgap": 3,
"vgap": 3
});
So it appears that doing nested layouts is only possible when using class selectors and not specific IDs. Is this a bug or intended behavior?