layout problem

[zolotoy]

I am trying to create the following layout:

--------------------
|          |           |
|          |           |
|          |           |
|          |           |
|          |---------|
|          |           |
|          |           |
--------------------

I want to resize it vertically and horizontally.

Here is my code:

Code:

<div easyui-layout class="easyui-layout" style="width:70%;height:80%;" fit="true">
        <div data-options="region:'west',title:'west',split:true" style="width:25%;">
        </div>
        <div easyui-layout class="easyui-layout" region="center" fit="true">
            <div data-options="region:'center',split:false"></div>
            <div data-options="region:'north',split:true" style="height:20%;"></div>
        </div>
    </div>   

And controller:

Code:

explorer.directive('easyuiLayout', function () {
    return {
        restrict: 'AE',
        link: function (scope, elem, attrs) {
            $(elem).layout();
        }
    }
});

It works at most part.
My problem is when resizing it vertically first will show the right edge of the layout. Screenshot is attached.

Thanks

[jarry]

Please use the code below instead.

Code:

<div easyui-layout fit="true">
    <div data-options="region:'west',title:'west',split:true" style="width:25%;">
    </div>
    <div region="center">
        <div easyui-layout fit="true">
            <div data-options="region:'center'"></div>
            <div data-options="region:'north',split:true" style="height:20%;"></div>
        </div>
    </div>
</div>   

[zolotoy]

That does not show anything.

[jarry]

Please look at this example http://jsfiddle.net/kq2omqko/. It works fine.

[zolotoy]

Your example works perfectly, but trying it in my environment and it not is not showing anything. The only difference is that I have controller's code in the separate file.
Any idea?

Thanks

[zolotoy]

Ok, adding the following style to the top div made it work:
<div easyui-layout fit="true" style="width:74%;height:80%;">