Question

I need to build a 3 x 3 page with 9 YUI panels.

I could build 3 33% vertical columns with YUI grids. 3 panels appear in the three columns. But when I put 3 panels within each column (to appear one below another), it gets stacked over each other. I think i should give x,y co-ordinates to align it, but panel heights could vary, so I may need to dynamically determine the x,y coordinates.

code is somewhat like this (using within Django – the child page which extends the main puts it the panel content):-

<div id="doc3">
<div id="bd" role="main">
<div class="yui-gb">
<div class="yui-u first">
{% block panel1 %}{% endblock %}
{% block panel2 %}{% endblock %}
{% block panel3 %}{% endblock %}
</div>
<div class="yui-u">
{% block panel4 %}{% endblock %}
{% block panel5 %}{% endblock %}
{% block panel6 %}{% endblock %}
</div>
<div class="yui-u">
{% block panel7 %}{% endblock %}
{% block panel8 %}{% endblock %}
{% block panel9 %}{% endblock %}
</div>
</div>
</div>
</div>

I render using:-

YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { width:"390px", visible:true, constraintoviewport:true } );
YAHOO.example.container.panel1.render();

I have tried using context to do something like align one panel to the bottom of another like giving context:["panel1","bl","tl] to the panel which should come below panel1. But doesn’t seem to help.

Any pointers to do this – position YUI panels one below another in a YUI grid?

Answer 1

As of now used below to position one panel below another. Found the underlay (shadow, matte etc) not to be moving, set it for “none” as of now. Need to research some more.

panel4y = YAHOO.util.Dom.getY('panel1') + document.getElementById("panel1").offsetHeight + 10;
YAHOO.util.Dom.setY('panel4',panel4y);