Print Page - layout problem

Title: layout problem
Post by: zolotoy on July 13, 2015, 08:23:23 AM

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

Title: Re: layout problem
Post by: jarry on July 13, 2015, 06:54:32 PM

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>

Title: Re: layout problem
Post by: zolotoy on July 14, 2015, 12:13:01 AM

That does not show anything.

Title: Re: layout problem
Post by: jarry on July 14, 2015, 01:26:40 AM

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

Title: Re: layout problem
Post by: zolotoy on July 14, 2015, 06:17:15 AM

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

Title: Re: layout problem
Post by: zolotoy on July 14, 2015, 06:23:27 AM

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

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: zolotoy on July 13, 2015, 08:23:23 AM