cant get it to right size in a top - middle -bottom layout scenario

[workingclasshero]

for explanation, please visit my link http://www.vidjay.net/

the middle part is a panel. If I replace the panel with a ScrollablePanel,

what happens is that the Panel goes to the bottom, the topLayout with the search bar expands to take about 80% of the screen and the bottomLayout overlaps into the ScrollablePanel.

expandratio for panle is set to one, and setsizefull()

so, the only change I made in code is to replace the Panel with Scrollablepanel, and the issue happens.

I could send you screenshot if required