Positioning more than one region as child to parent region in apex

As many of them havte observed that in Oracle APEX we place loads of issues when it comes to positionsing the child region or item in the region.

Recently , i had encountered an requirement where i need to position the many regions as child for a parent region .

I looked into apex 3.0 , we didnt have parent region assignment option itself .

I looked into apex 4.0 , we had it , good enough .

But then again though i was especifying a region to be dispalyed in second col it was disaplying in the not being effected in position , and even there was huge problem with loook and feel.


 I thought y not use Oracle Apex javascript api , and i found very gud function called $dom_MakeParent.

Wanna see demo click here

Steps :-

Step 1):- Create one html region on the page , name it as parent region .
          Edit its source as

       <table>
<tr> <td id="cel1"> </td> <td id="cel2"> </td> </tr>
<tr> <td id="cel3"> </td> <td id="cel4"> </td> </tr>
      </table>


step 2) create multiple html regions change their static ids as child1id, child2id,child3id,child4id correspondingly.

step 3) edit page include this code on HTML header region of the page .

function assignparent()
{
alert('called');
// $dom_MakeParent(p_Node,p_Parent)
$dom_MakeParent('childid','cel1');
$dom_MakeParent('child2id','cel2');
$dom_MakeParent('child3id','cel3');
$dom_MakeParent('child4id','cel4');
alert('done');
}


Step 4) create a button name :- make child , url redirect : javascript:assignparent.

step 5) create another html region and set its parent as parent region which u have created and position 6



Now run the page , u can see last html region is already a child , now click make parent button and see the difference.

see Demo here